Append input from search box into button link
Question
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!
2 answers
solution1
2 ACCPTED 2020-06-12 16:45:26
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>
solution2
1 2020-06-12 16:46:06
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.