Undesired text is added when setting the href attribute with JavaScript

Question

I am developing on localhost: http://127.0.0.1:8000

When I perform some search on the website, I want that if the query does not return results, the New entry button allows the creation of a new article from what has been searched in the search input.

So if I search 'whatever' and there is no article called 'whatever', the button should redirect me to the creation page of the article 'whatever'.

<script>
$( document ).ready(function() {
    var newEntryUrl = window.location.hostname+":8000/wiki/_create/?slug="+"{{ search_query }}";
    document.getElementById('newEntrybtn').setAttribute('href',newEntryUrl); 
});
</script>

{% for article in articles %}
{% block wiki_search_loop2 %}
{% endblock %}
{% empty%}
    There is no page created for '{{ search_query }}', would you like to create a page nowee?
    <a class="btn btn-success" id="newEntrybtn" role="button"><i class="fa fa-plus" aria-hidden="true"></i> New entry ({{ search_query }})</a>
{% endfor %}

To calculate the url to create the new article, I use this line:

var newEntryUrl = window.location.hostname+":8000/wiki/_create/?slug="+"{{ search_query }}";

If I do an alert(newEntryUrl); it returns the desired result: 127.0.0.1:8000/wiki/_create/?slug=whatever

However, if I click the newEntrybtn button, it redirects me to the following url: http://127.0.0.1:8000/wiki/_search/127.0.0.1:8000/wiki/_create/?slug=whatever

Which is strange to me since at no time have I assigned the href attribute to the button, much less have I assigned it any value. It seems that somehow, by default, it gets the value of the current page.

My question is, how can I remove the current page: http://127.0.0.1:8000/wiki/_search/ so that the button href just has this structure: 127.0.0.1:8000/wiki/_create/?slug=whatever ?

Answer 1

The problem is because you are using a relative URL as the href, causing the browser to append this to the current URL you are looking at.

In your example, your button will be set as follows:

<a class="btn btn-success" id="newEntrybtn" role="button" href="127.0.0.1/...">

And clicking on it will append the href to the current URL since the browser will consider it as a resource of the current page.

Following your example, using an absolute URL will allow you to go directly to the URL as you have it set as long as you know the full structure (in your case, you are missing the protocol/scheme):

<a class="btn btn-success" id="newEntrybtn" role="button" href="http://127.0.0.1/...">

Or ideally you should use a relative URL by defining correctly the segment of the URL it represents (defining the path from your host where the resource is located):

<a class="btn btn-success" id="newEntrybtn" role="button" href="/wiki/_create/...">

(notice how the URL starts with a slash and omits the server host and protocol).

It is preferred in most cases to use relative URLs to make your code run regardless of the server (environment), meaning it will always use the same server or protocol of the current URL. But it's up to you based on your needs.

References:

• https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#absolute_urls_vs_relative_urls

Answer 2

I think you are appending the value twice. Once when the page loads because it is in the document.ready function and once again when the button is clicked. Try writing it in another function and calling the function when the button is clicked.

setAttribute is being called twice

https://codepen.io/sijbc/pen/zYNdrmz

  .setAttribute() is being called twice 

function createUrl(){ var newEntryUrl = window.location.hostname+":8000/wiki/_create/?slug="+"{{ search_query }}"; var newEntryBtn = document.getElementById('newEntrybtn') newEntryBtn.addEventListener("click" function(){ newEntryBtn.setAttribute('href',newEntryUrl); })

Answer 3

I found a good solution without using JavaScript, in just one line of code:

<a class="btn btn-success" href="/wiki/_create/?slug={{ search_query }}" role="button"><i class="fa fa-plus" aria-hidden="true"></i> New entry ({{ search_query }})</a>

Thanks to those who have posted an answer, you have inspired me a lot.