8.8 Submitting a Form by an Enter Key Press in Any Text Box

NN 4, IE 4

8.8.1 Problem

You want a press of the Return/Enter key in one or more text fields to submit the form.

8.8.2 Solution

To simulate a standalone database entry form, you might implement the auto-focusing technique in Recipe 8.6 for all but the last test box, which instead uses the onkeypress event handler to invoke the following function:

function submitViaEnter(evt) {
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var form = target.form;
    var charCode = (evt.charCode) ? evt.charCode :
        ((evt.which) ? evt.which : evt.keyCode);
    if (charCode =  = 13 || charCode =  = 3) {
        if (validateForm(form)) {
            form.submit( );
            return false;
        }
    }
    return true;
}

Omit the onchange event handler that performs real-time validation. The above function triggers the batch validation (which alerts the user to any problems in the last field) and submits the form via the submit( ) method. The event handler of the last field of the form looks like the following:

onkeypress="return submitViaEnter(event)"

This technique also assumes that the form element has the onsubmit="return false" event handler in place so that only the scripted submit( ) method submits the form (as discussed in Recipe 8.6).

8.8.3 Discussion

To help summarize some of the form enhancements described in Recipe 8.6 and Recipe 8.7, as well as this recipe, the following text field form incorporates event handlers that invoke several functions described earlier in this chapter. Guiding the design of this form are requirements that the Return key advance focus to the next text field until the last field is reached, where Return submits the form:

<form action="..." method="GET" name="sampleForm" onsubmit="return false">
First Name: <input type="text" size="30" name="name1" id="name1" 
    onkeypress="return focusNext(this.form, 'name2', event)" 
    onchange="isNotEmpty(this)" /><br>
Last Name: <input type="text" size="30" name="name2" id="name2" 
    onkeypress="return focusNext(this.form, 'eMail', event)" 
    onchange="isNotEmpty(this)" /><br>
Email Address: <input type="text" size="30" name="eMail" id="eMail" 
    onkeypress="return submitViaEnter(event)" /><br>
<input type="reset" /> <input type="button" value="Submit" 
    onclick="if (validateForm(this.form)) {this.form.submit( )}" />
</form>

Notice that the Submit button is a regular button-type input element. This prevents nonscriptable browsers from submitting the form. If you'd like nonscriptable browsers to be able to submit the form (presumably to let server-side validation catch any errors), use a modified submit-type input element as follows:

<input type="submit"  onclick="if (validateForm(this.form)) {this.form.submit( )}" />

For scripted browsers, the default action of the submit-type input element is cancelled by the form's onsubmit event handler, but nonscriptable browsers will submit the form like an ordinary form.

8.8.4 See Also

Recipe 8.6 for blocking unintended form submission through the press of the Return/Enter key; Recipe 8.7 for using the Enter key to advance focus to the next field in sequence.