Stop reloading page with 'Enter Key'

Question

I have a search box at the top of page that makes an ajax call when a user hits the adjacent button. I am trying to update the input tag so that when a user hit the 'enter' key, the apropriate JavaScript takes place without reloading the page. The problem is that the page keeps reloading. Here is my latest attempt:

$("searchText").bind('keyup', function(event){    if(event.keyCode == 13){      event.preventDefault();     $("#buttonSrch").click();      return false;   } });  <input type='search' id='searchText' /> <input type='button' id='buttonSrch' onclick="search(document.getElementById('searchText'))" value='Search' /> 

Answer 1

Don't bind to the inputs; bind to the form. Assuming the form has an ID of searchForm:

$("#searchForm").submit(function() {     search($("#searchText").get(0));     return false; }); 

Try it out.

It can also be done with plain JavaScript:

document.getElementById('searchForm').addEventListener('submit', function(e) {     search(document.getElementById('searchText'));     e.preventDefault(); }, false); 

Answer 2

I know its a little late but I ran into the same problem as you. It worked for me using "keypress" instead of bind.

$('#searchText').keypress(function (e) {                                               if (e.which == 13) {             e.preventDefault();             //do something           } });