How to add input to existing url

Question

So i've been trying to figure out a way to do this for quite a while,

If a person types : "input" -> button's link become exemple.com/input

Here is my html

<div class="search-box">
    <form method="get" id="search-index-form" name="myForm" class="clear-block" role="search">
        <input id="userInput" placeholder="Search">
        <button type="submit" id="mylink" href="http://www.exemple.com/" onclick="othername(); changeLink();"><span>search</span></button>
    </form>
</div>

And my javascript

function othername() {
    var input = document.getElementById("userInput");
}

function changeLink() {
    var link = document.getElementById("mylink");
}
link.setAttribute('href', link + input);

Thanks for the help in advance

Answer 1

You need only one function changeLink to achieve the desired result and also, use a baseHref variable to store the base href using Element.getAttribute() method.

You can call the changeLink when the blur event is fired. Then, use the baseHref and join it with the value from button which is retrieved from value property of input element.

 let baseHref = document.getElementById("mylink").getAttribute('href'); function changeLink() { var input = document.getElementById("userInput"); var link = document.getElementById("mylink"); link.setAttribute('href', baseHref + input.value); console.log('Now the link is: ' + link.getAttribute('href')); }

 <div class="search-box"> <form method="get" id="search-index-form" name="myForm" class="clear-block" role="search"> <input id="userInput" placeholder="Search" onblur='changeLink();'> <button type="submit" id="mylink" href="http://www.exemple.com/"> <span>search</span></button> </form> </div>

Answer 2

You can change URL by using window-object, eg:

window.location.href = url + '/' + input

or you can to see at this link (javascript location)

https://www.w3schools.com/jsref/obj_location.asp