Setting default submit button for Enter Key using jQuery

To Start with ...

One of the most annoying things in developing web pages is handling the 'Enter Key' for form submission. The 'Enter Key' makes form submission so easy that the user always tend to use it. The easiest and the most intuitive way is the user enters some text or make some changes to the existing text and then presses 'Enter Key' to submit the form.

Wait a minute....so is there a problem here ?

Yes, of course !

And what is it ?

There are 2 cases.

Case 1 - Form with multiple fields and single submit button

Case 2 - Form with multiple fields and multiple submit buttons. Lets say - Delete, Update / Save, Cancel etc.

In general, Case 1 is very straight forward and you should not be having any issues because there is only one button and when you press 'Enter Key', that single button will get the focus and will submit the form.

But in Case 2, since there is more than one submit button, when you press 'Enter Key', in most cases the browser will either pick the button that comes first in the source code [IE] or depending on the lowest tab index [Firefox & Opera].

oh Gotchu!

Good.

Do we have a Solution?

Sure. There are several ways to resolve this issue. But if you are looking for an Enterprise Wide Solution you can probably start with the below code.

I am using simple jQuery and HTML form events

Code

Consider the following HTML page with multiple submit buttons -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml">
                      
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                      <title>Untitled Document</title>
                      </head>
                      
                      <body>
                      <form id="form1" name="testForm" method="post" action="">
                       <table  border="1" cellpadding="5">
                       <tr>
                           <td>First Name: </td>
                           <td><label><input type="text" name="textfield3" /></label></td>
                       </tr>
                       <tr>
                           <td>Last Name </td>
                           <td><label> <input type="text" name="textfield4" /></label></td>
                       </tr>
                       </table>
                       <div>
                           <input type="submit" name="CancelButton" value="Cancel" />
                           <input type="submit" name="DeleteButton" value="Delete" />
                           <input type="submit" name="UpdateButton" value="Update" />
                       </div>
                      </form>
                      </body>
                      </html>

Open in new window

Now if you have your focus on one of the HTML form fields - First Name or Last Name and hit 'Enter Key', form will be submitted to one of the button actions but you are not sure which ones!

Now let us say you wanted to default the form submission always to "Update" button, you need to do the following -

1. Assign an ID to Update button

<input type="submit" name="UpdateButton" value="Update" id="defaultActionButton">

Open in new window

2. Capture onKeyDown event for textboxes and submit the form to "Update" button / action. [this is where I use jQuery]

// all jQuery events are executed within the document ready function
                      $(document).ready(function() {
                      
                         $("input").bind("keydown", function(event) {
                            // track enter key
                            var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
                            if (keycode == 13) { // keycode for enter key
                               // force the 'Enter Key' to implicitly click the Update button
                               document.getElementById('defaultActionButton').click();
                               return false;
                            } else  {
                               return true;
                            }
                         }); // end of function
                      
                      }); // end of document ready

Open in new window

The above snippet will handle 'Enter Key' events from textbox, checkbox and radio button. You can write similar code to enhance the functionality to dropdowns as well.

Hope that helps!

Setting default submit button for Enter Key using jQuery

Comments (1)