Demo for How Forms Submit When Pressing Enter

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.

Add a Second Input
Add a Second Input
Add a Second Input
Add a Second Input
Add a Second Input
Add a Second Input
Submit
Single Input By Browser
Test # / Browser1 Singlea2 Single3 Single4 Single5 Single6 Single
FireFox 3.5 & Opera 9.6 (Enterb)bothcbothbothbothsubmitsubmit
FireFox 3.5 & Opera 9.6 (Click)bothbothbothbothclickclick
Chrome 2 & Safari 4 (Enter)bothbothsubmitsubmitsubmitsubmit
Chrome 2 & Safari 4(Click)bothbothbothbothclickclick
Chrome 18 (Enter)bothbothbothbothclickclick
Chrome 18 (Click)bothbothbothbothclickclick
IE 6 & 7 (Enter)submitdsubmitdsubmitsubmitsubmitsubmit
IE 6 & 7 (Click)bothbothclickbothclickclick
More than One Input By Browser
Test # / Browser1 Doublea2 Double3 Double4 Double5 Double6 Double
FireFox 3.5 & Opera 9.6 (Enterb)bothbothbothbothnonenone
FireFox 3.5 & Opera 9.6 (Click)bothbothbothbothclickclick
Chrome 2 & Safari 4 (Enter)bothbothsubmitsubmitsubmitsubmit
Chrome 2 & Safari 4(Click)bothbothbothbothclickclick
Chrome 18 (Enter)bothbothbothbothnonenone
Chrome 18 (Click)bothbothbothbothclickclick
IE 6 & 7 (Enter)bothdbothdnonebothdnonenone
IE 6 & 7 (Click)bothbothclickbothclickclick

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