Test Page - Form Submitting Using Enter

Here is the problem. You have a form with with 'submit' event listener, and you have a button inside that form with a 'click' event listener. Now, as users are completing fields in the form, you want them to be able to hit 'enter' to trigger the 'submit' event callback. But you do not want to trigger the 'click' event on the element you are using as buttons. Nor do you want to allow the forms default submittal behavior, because you want to capture it and send an AJAX request.

This page looks at 6 different types of form/button models and how different browsers react. The first half of the page is dedicated to my testing code that I used to evaluate different browser. The second half of the page shows my conclusions.

If you are running the tests yourself, they print to the browser's console log, so look there to see the results.

^a Single and Double refer to the number of fields in the form (1 or 2 fields were used for testing purposes)

^b Two rows are used for each browser, "(Enter)" for hitting the enter key in the field and "(Click)" for clicking the button

^c 'both' means that the form submitted and the `button` click fired

^d IE can required 2 enters if the field is empty before firing the submit