Submit With Enter Key Instead of Button

With some forms, users may find it more convenient to press the enter key than to locate the submit button and clicking that.

If desired, both this enter-key functionality and a submit button can be provided. They aren't mutually exclusive. (The example, further below, has a submit button.)

The enter-key functionality can be used for these types of form submissions:

1. Method POST or method GET to software on the server.

   This is the functionality of the traditional form. It's submitted to form handling software separate from the web page.

2. Submissions handled exclusively by JavaScript.

   (The example, further below, is of this type.) JavaScript can manipulate the data, but there is no requirement that it do so. It may request content from the server, change the page, redirect the browser, anything JavaScript can do. Generally, it would use the information in the form to determine at least some of its actions.

3. A combination of JavaScript and server software.

   JavaScript submits the form data to software on the server. JavaScript might manipulate the data before or after submitting it. It may do anything JavaScript can do.

Implementing the enter-key functionality causes the enter key press to be intercepted from anywhere on the page. So long as the page is in focus, the key press is noticed.

Therefore, implement this only on pages where it will be used.

Caveat: Don't implement this enter-key functionality for forms containing a textarea field. Textarea fields require the enter key to start a new line. The form would submit instead of entering a new line in the textarea field.

Here is an example form. The form doesn't actually need to be used. Pressing the enter key from anywhere on the page will initiate form submission.

Implementation

Paste this HTML and JavaScript the source code into a test web page. Notes follow.

<form id="form-id">
<!-- Form fields go here. -->
<input type="submit" onclick="HandleSubmission(); return false;" value="Button to Press">
</form>

<script>
function HandleSubmission()
{
   var form = document.getElementById("form-id");
   // Replace with code for handling submission.
}

function CheckForEnterClick(e)
{
   e = e || window.event;
   if( e.keyCode == 13 || e.which == 13 ) { HandleSubmission(); }
}

var addEventHandler = function(element,eventType,functionRef)
{
    if( element == null || typeof(element) == 'undefined' ) { return; }
    if( element.addEventListener ) { element.addEventListener(eventType,functionRef,false); }
    else if( element.attachEvent ) { element.attachEvent("on"+eventType,functionRef); }
    else { element["on"+eventType] = functionRef; }
};

addEventHandler(window,"keydown",CheckForEnterClick);
</script>

The source code uses various colors to highlight sections of the code that will be addressed.

We'll do this in two steps.

Step One —

At the first four lines, you'll see the code for a form.

In the very first line, you'll see form-id, which is the id value of the form. The id may be changed. If you do, also correspondingly change the form-id in the JavaScript that will be mentioned in step two.

The green colored HTML comment tag in the form indicates where you put your form's fields. Don't insert textarea fields. But other normal form fields are OK. There is no limit to how many.

Immediately below that HTML comment tag, you'll see the button tag and the type="submit" attribute. If you wish, that may be changed to type="button". Should you make that change, then optionally also remove ; return false; from the tag. (return false prevents form submission, which is an extraneous command with type="button".)

That's all for the form.

Step Two —

There is one JavaScript function to talk about, function HandleSubmission(). You'll find it immediately below the form.

The function HandleSubmission() is where the form submission is handled. If either the button is clicked or the enter key is pressed, the action will end up at function HandleSubmission().

In the first line of the function, you'll see the form-id specified. That's the same id as the form id value. They must be identical. If one is changed then also change the other.

There's only one line left in he function HandleSubmission(), and that's the JavaScript comment colored red. This is the line that I can't tell you specifically how to code.

Now, let's talk about the JavaScript comment colored red. This is the one line that I can't tell you specifically how to code, only in general. Replace the // Replace with code for handling submission line with the form handling code that's required for your implementation.

Here is a hint.

If you just want to submit the form (no special JavaScript handling), replace the // Replace with code for handling submission line with

form.submit();

That line will submit the form.

If JavaScript handling of the form field values is required, or other JavaScript functionality, then replace the // Replace with code for handling submission line with however many lines it takes to implement what you need.

For the example in this article, the // Replace with code for handling submission line was replaced with

alert("Button or enter key was pressed.");

The Rest of the Code —

All the rest of the source code is good as it is. No changes needed.

When implementing enter-key functionality, the form and the JavaScript may be in different places on the page.

The form code, of course, needs to be where the form is to be published.

The JavaScript can be anywhere that JavaScript can be run. Immediately above the cancel </body> tag is generally a good place. If you wish, especially if the enter-key functionality will be implemented on several of your pages, the JavaScript may be pulled in from an external file (necessary if implemented on a WordPress post or page).

With enter-key functionality, the form user can press enter to submit the form. It's unnecessary to hunt for the submit button.

(This article first appeared in Possibilities ezine.)

Will Bontrager