Christopher Huyler’s Flex Blog

You may have noticed that in Internet Explorer, pressing return while focused on a form input box only submits the form when there is a single input box. Once you have multiple inputs, say a username and password, it stops working. Read on for a tip on how to gain back this behavior on all browsers AND validate the input before submitting the form!

Take the following simple form:

<form name="myform" method="post">
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
<a class="submit button" 
href="javascript:validateForm('myform')">Sign In</a>
</form>

Note in the above example that I have used a simple anchor tag instead of a submit input button. This makes it easier to launch a validation function instead of submitting the form. The button is defined by two classes, submit and button. The submit class will be used when we call getElementsByClassName later on. The button class can be used to define the style of your button. For example:

<style>
.button {
	border: 1px solid gray;
	background-color: silver;
	text-decoration: none;
	color: black;
	font-weight: bold;
}
</style>

Now you can write a simple input validation function:

function validateForm(formName) {
	var data = $(formName).serialize(true);
	if (data.username.length>0 && data.password.length>0)
		$(formName).submit();
}

Next write a function that will handle keypress events:

function keypressEventHandler(e) {
	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	else return true;
	if (keycode==13) { // 13 means the user pressed return
		// get an array of all submit buttons on the page
		var submits = document.getElementsByClassName("submit");
		// get an array of all anchor tags inside the current form
		var children = this.form.getElementsByTagName("a");
		for (var i=0; ilength; i++) {
			var child = children[i];
			for (var j=0; jlength; j++) {
				var submit = submits[j];
				if (submit == child) {
					// if an anchor tag is equal to the current submit, launch its href
					// which should be a javascript validation function
					window.location = submit.href;
					return false;
				}
			}
		}
	}
}

Next write a function that will assign keypress events to all form elements on a page:

function initKeyPressEvents() {
	var forms = document.getElementsByTagName("form");
	for (var i=0; i
length; i++) {
		var form = forms[i];
		var inputs = form.getElementsByTagName("input");
		for (var j=0; j
length; j++) {
			var input = inputs[j];
			input.onkeypress = keypressEventHandler;
		}
	}
}
// assign events after entire page has been parsed
setTimeout(initKeyPressEvents,500);

That’s it! When the user clicks enter, the keypressEventHandler should catch all return characters and launch the function defined in your submit anchor tag instead of actually submitting the form. Inside your validation function you can check inputs and submit the form if everything checks out.

Download the Complete Example