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

Add onSubmit="return false;" on your form tag

<form onSubmit="return false;">
/* form elements here */
</form>`

Answer 2

Just use the "action" attribute in <form> tag. Like this

<form action="#">   // your content     </form>

Answer 3

Does your JS execute immediately or on document ready? If it's not in a document ready the button won't exist at the time you're trying to call bind.