To Start with…

One of the most annoying things in developing web pages is handling the “Enter Key” for form submission. ‘Enter Key’ makes form submission so easy that users always tend to use it. The easiest and the most intuitive way is that, the user can enter some text or make some changes to the existing text and then hit “Enter Key” to submit the form.

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

Yes, ofcourse !

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 –

<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>

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">

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</pre>

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!


3 Comments

  1. Pharme753
    September 30, 2009 at 1:46 pm

    Very nice site!

    Reply
  2. Terri Mayberry
    October 4, 2010 at 7:19 pm

    Hmm .. You have a great site and this post is awesome .. I’ll come back again and subscribe your RSS for sure :)

    Reply
  3. Deana Peha
    October 21, 2010 at 7:25 am

    At last a good blog post about the subject, keep up the good work and I hope to learn a lot more of your stuff in the time to come.

    Reply

Leave a comment