I want to create a simple form with only an input textbox and search button.
A person would type in the search term in the box and press search.
All that will do is take their search term and add it to the end of the url.
So if search term is "good italian food" the submit button would send the user to http://domain/find/good italian food
Whats the simplest way to do this?
Thank you!
4 Answers 4
<html>
<head>
<script type='text/javascript'>
function Search() {
var keyword = document.getElementById("keyword").value;
var url = "http://yourwebsite.com/find/"+keyword;
window.location = url;
return false;
}
</script>
</head>
<body>
<form name="search">
<input type="text" name="keyword" id="keyword" />
<input type="button" name="btnser" onclick="Search()" value="Search" />
</form>
</body>
</html>
Comments
I'd also suggest using encodeURI() to make it 'safe'.
Comments
use javascript and html form
create a form with a button and text box in the post of the form call the javascript function to create the url with the user input text
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function redirect(){
var s = document.getElementbyID("txt").value;
var url="http://url.com/" + s;
window.location = url;
}
</script>
</head>
<body>
<form>
<input type=''></input>
</form>
</body>
</html>
Comments
you could override the action attribute within the onsubmit event: Example
HTML
<form action="#" onsubmit="send(this)" method="post" target="_blank" >
<input id="text"/>
<input type="submit" value="submit"/>
</form>
JavaScript
function send( form){
form.action = location.href + '/'+encodeURI(document.getElementById('text').value);
}
Also, overriding the form action, or redirecting the user, within the onsubmit event will allow you to use a true submit button.
This gives the user the ability to just hit the enter key once they finish typing to submit the search without you having to write extra logic listening for the the enter key within the textbox to submit the search.