h1

Disabling the “enter key” on forms using JavaScript

November 16, 2007

In this post, I will discuss how to disable using the “enter key” to submit a a form. There are many subtle nuances in form behavior that many people don’t think about when using them. On most browsers, hitting the enter key while the focus is set to one of the form elements (text areas not included) the form will be submitted. If you have a submit button for the form (not required) the enter key actually simulates a click on the first submit button for the form.

In many cases, this behavior is beneficial and natural for form processing. Take for example the main google search page.

google.gif

When you type text in the search field and then hit the enter key, the form is submitted and google does it’s search magic. There is no need to click the “google search” button to submit the form. People typically don’t think twice about this behavior… its quite natural. For most small forms (less than 4 form elements) this works quite well.

On the other hand, If you have a form with a lot of form elements, or needs to behave differently, this behavior can be quite frustrating. Also forms with complex JavaScript form verification may want to force submission through a single source (pushing a button)

Think about entering a sales order form, form let’s say phpBMS.

salesorder.gif

There is a lot of information you need to enter before saving the record properly. When adding information, or new product line items, you might accidentally or instinctively hit the enter key. The default form submission would then immediately try to save the sales order record. This can be huge source of frustration for your users.

The Solution

First, this solution requires JavaScript. However, in most cases with complex forms, you might already be doing some sort of form verification.

Before going further, I will be discussing how to implement this using simple javascript. In phpBMS we use a modified MochiKit setup to implement JavaScript “listeners” on loading rather than putting the trigger code inside the HTML (but that’s an item I will discuss in a future post.)

1. Set the form’s onsubmit

We are going to set the form’s on submit to return false – i.e. it wont submit the form.

<form id="theform" action="myaction.php" method="post" onsubmit="return false">

This is going to make sure that hitting enter will never submit the form. Unfortunately, it also prohibits submit buttons from submitting the form (which actually is a good thing.) So the next thing we need to do is enable the user to actually submit the form.

2. Create a submit function/button

Because submit buttons are now not working, I tend to add a BUTTON tag and a corresponding JavaScript function that actually submits the form. The HTML looks like this:

<button onclick="submitForm()">Submit Form</button>

and for the JavaScript function, we grab the form element, and run the submit function directly. Make sure that the form element has an Id attribute set, or you cannot manipulate it in JavaScript

function submitForm(){
theform = document.getElementByID("theform");
theform.submit();
}

This now gives us a single point for form submission. If we wanted to do form verification, we could do it right form inside this function. What’s more, the stoopid enter key no longer holds sway over us.

Conclusions

Having the enter key submit a form is not always bad, but in certain circumstances, is not always good. Using some simple JavaScript tricks you can consolidate you exit points for the form and disable it from potentially ruining all the data a user has entered.

About these ads

One comment

  1. [...] [...]



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: