I ran across this problem while building a search function for one of the web-pages at work. I already had couple of forms on that page that used jQuery to submit the form via AJAX. So, I just copied one of the forms and modified it to build the form for search. I was capturing the return key on the form to submit the data to the server. But instead of sending the AJAX request, the whole page got submitted and the page would refresh. I found this very annoying. As, similar code worked for the other two forms but it won’t work for this form. After couple of hours of trial and error and making sure that I didn’t have a typo and everything was correct, I found out that – “if you have only one textfield in your form then the browser would automatically submit the form on hitting the return key.” :O
To circumvent this weird behavior, I returned false from the jQuery event handler function after doing my processing of the form. Below is an executable bare-bones example code snippet of this scenario.
The “return false” in the above code is the key. If you don’t have that statement then the form will get submitted to itself. But if you have more than one text-field in your form, then you do not need that “return false”. 🙂 And yes you do need a “return false”, just a return or “return true” won’t work either. 🙂