I recently worked on an application that had a form with a lookup feature in it. The form consisted of several dynamically added sections, each with a simple input field and a Find button. When the Find button is pressed, an AJAX call was made to load the data beneath the input field.
This was all working well except one thing: users kept typing in the Find field and hitting the Enter key, causing the form’s default action, Submit, to occur. After observing my tester make this mistake 5 times in a row, it was pretty obvious to me this was a UI design flaw and needed to be corrected.
Here is a very stripped-down version of the form, which basically does nothing, but shows the inherent problem with the design:
<html>
<head>
<title>Textbox Search Default</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#btnFind').click(function() {
// Do some logic to make an AJAX call and load the employee's info
});
});
</script>
</head>
<body>
<p>
This sample form has a find field that we don't want to cause
a different action on "enter" than the standard form submission.
</p>
<form>
<table>
<tr>
<td colspan="2">
<input type="text" name="employeeId" id="employeeId" />
<input type="button" name="btnFind" id="btnFind" value="Find" />
</td>
</tr>
<tr>
<td>Name: <input type="text" name="employeeName" id="employeeName" /></td>
<td>Location: <input type="text" name="location" id="location" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
</body>
</html>
As you can see, its a pretty simple example. There is a simple form, consisting of a table of values. The employeeId input field is filled out, the user presses “Find”, and the Name and Location is retrieved via an AJAX call and the input fields are pre-populated (you will have to imagine the second part, as the jQuery code above glosses over this part of the implementation).
The problem, again, is that if you type in an Employee ID and press Enter, you just submitted a blank form.
To solve this problem is rather simple. Here is an updated version of the HTML with the correction applied:
<html>
<head>
<title>Textbox Search Default</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#btnFind').click(function() {
// Do some logic to make an AJAX call and load the employee's info
});
$('#employeeId').keydown(function(event) {
var key = event.keyCode || event.which;
if(key == 13) {
event.preventDefault();
$(this).siblings('#btnFind').click();
}
});
});
</script>
</head>
<body>
<p>
This sample form has a find field that we don't want to cause
a different action on "enter" than the standard form submission.
</p>
<form>
<table>
<tr>
<td colspan="2">
<input type="text" name="employeeId" id="employeeId" />
<input type="button" name="btnFind" id="btnFind" value="Find" />
</td>
</tr>
<tr>
<td>Name: <input type="text" name="employeeName" id="employeeName" /></td>
<td>Location: <input type="text" name="location" id="location" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
</body>
</html>
What is happening here is that we are adding a “keydown” event handler to the employeeId field which tests if the key being pressed is the Enter key (key #13). If it is, we simply call event.preventDefault(), which causes the event to not get propegated to the Form to trigger the submission, then generate a click() event on the Find button.
I think this is a pretty simple solution to the problem, and allows for a much better user experience.