<!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>
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!
<input type="submit" name="UpdateButton" value="Update" id="defaultActionButton">
// 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
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.
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (1)
Commented: