I have an input box and a button. When user types in a search keyword i want to grab that on button click and also direct to URL+ Keyword, with the keyword appended to the url as a querystring like this http://mysite.com/events.aspx?kwd=dance
How do i do that in javascript or jquery?
<input name="keyword" class="EventSearchBox" type="text" />
<input name="SearchButton" type="button" value="Search" /><br/><br/>
You would be better off turning your HTML into a form, with its action attribute pointing to http://mysite.com/events.aspx and its method attribute as get.
Then you should rename your keyword input box as kwd. Then you wouldn't need to use any JavaScript to get it to work.
However, if that's not possible for some reason...
var keywordInput = $('input[name="keyword"]');
$('input[name="SearchButton"]').click(function() {
window.location = 'http://mysite.com/events.aspx?kwd=' + encodeURIComponent(keywordInput.val());
});
var keywordInput = document.getElementsByTagName('keyword')[0];
document.getElementsByTagName('SearchButton')[0].addEventListener('click', function() {
window.location = 'http://mysite.com/events.aspx?kwd=' + encodeURIComponent(keywordInput.value);
}, false);
Remember that < IE9 doesn't support addEventListener(). You'll need to use attachEvent().
