CODEWITHSUNDEEP
phphtmlwordpressbuttonhyperlink
SlimShadys
SlimShadys

Reputation: 125

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>

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!

Upvotes: 0

Views: 886

Answers (2)

Fanan Dala
Fanan Dala

Reputation: 594

Add the following Javascript to help

<script>
function goToSearch() {
    window.location.href= 'https://mywebsite.com/' + encodeURI(document.getElementById("tag_search").value)
}

</script>

Then your HTML should look like this

<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="goToSearch()" />
        </div>
    </form>
  </div>
</html>

Upvotes: 1

PeterSH
PeterSH

Reputation: 475

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>

Upvotes: 3

Related Questions