Append input from search box into button link

I’ll make this short and quick. 🙂

I’m trying to implement a button on my website, which redirects me to a URL I specify + what the user is looking for.

I have this little piece of code here:

<html>
  <div class="search">
    <form role="search" method="get" id="search">
        <div>
            <input type="text" value="" name="tag_search" id="tag_search" />
            <input type="button" value="Cerca" onclick="window.location.href='https://mywebsite.com/'" />
        </div>
    </form>
  </div>
</html>

JavaScript
​x
 
<html>  <div class="search">    <form role="search" method="get" id="search">        <div>            <input type="text" value="" name="tag_search" id="tag_search" />            <input type="button" value="Cerca" onclick="window.location.href='https://mywebsite.com/'" />        </div>    </form>  </div></html>​

that is almost working.

The only thing is that if the User inputs “Hello” in the Search Box, it will always search for the following URL once you press the “Submit” button: https://mywebsite.com/

How can I append what the User has written into the Search Box, so that the Button will redirect me to: https://mywebsite.com/Hello ?

Thank you all!

Answer

Add the value of the input to the link

<html>
  <div class="search">
    <form role="search" method="get" id="search">
      <div>
        <input type="text" value="" name="tag_search" id="tag_search" />
        <input type="button" value="Cerca" 
          onclick="window.location.href='https://mywebsite.com/' + 
          document.getElementById('tag_search').value" />
      </div>
    </form>
  </div>
</html>

JavaScript
 
<html>  <div class="search">    <form role="search" method="get" id="search">      <div>        <input type="text" value="" name="tag_search" id="tag_search" />        <input type="button" value="Cerca"           onclick="window.location.href='https://mywebsite.com/' +           document.getElementById('tag_search').value" />      </div>    </form>  </div></html>

Advertisement

Answer