HTML Tip:
Avoid Duplicate Form Submissions

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Forms are a great way to add interactivity to your Web site. But this useful tool may cause problems if your visitors submit the same form information over and over again. Solve that problem with some simple JavaScript code that prevents your form from being submitted multiple times.

Avoid Duplicate Submissions

"Prevents your form from being submitted."  Now that's a scary statement, isn't it?

Actually, it's only scary if you don't do something to prevent duplicate submissions.  Controlling form submissions helps both you and your visitors. You don't want to have to wade through a bunch of duplicate comment forms, count survey responses more than once, or process duplicate orders.  Customers don't want you sending them duplicate orders or charging their credit cards several times.

Suppose a customer fills out your online order form and hits the SUBMIT button several times. Depending on your shopping cart system, the customer may see a credit card charge for each submission. Customers never blame themselves. No, your livid customer may assume that you're running some kind of scam site and complains to the credit card company. If it happens a lot, your merchant account provider may close your account.

The only way to avoid the problem is to control the SUBMIT button to avoid duplicate submissions.

Disable The SUBMIT Button

In this article, we'll show you two different methods to prevent duplicate submissions.

The first method disables your form's SUBMIT button, but only after the visitor has clicked it once and sent the form information.

You can test it here:

Note: You'll have to view this page in Explorer to see it in action.

To make this method work, include this function inside your page's HEAD section:

The JavaScript event that fires this script is the onClick event. You're telling it to disable the SUBMIT button after the button is clicked. At that point, the button value equals "1."

We included a JavaScript ALERT box in this example so that you'll know the form is working. You'll probably want to remove it if you use this script on your own page because your confirmation page will thank visitors for submitting.

To tie this JavaScript to your form, change the form's SUBMIT button to call the JavaScript function. Do this by adding an onClick event to the appropriate INPUT tag, as shown below.

Also be careful to set the NAME attribute of your form to match the object name used in your JavaScript. In our example both the NAME attribute and the object are called "commentForm." If you want to name your form something else, then you'll have to change the JavaScript too.

At present, only Internet Explorer supports the "disabled" control for input attributes! However, if you're using another browser like Netscape or Opera, then you should also notice that this technique degrades gracefully. It doesn't break your form, page layout, or alert visitors that anything is amiss.

Use Cookies To Stop Duplicates

At  NetMechanic, we use a slightly different method that works in all browsers that have cookies turned on.

Just insert this JavaScript code in the HEAD section of your document:

 You'll call the function inside the opening FORM tag like this:

<FORM onSubmit="return AllowNoDups();"

Try using this method here:

When a visitor submits the form, the function sets an identifying cookie. Before the form processes, the function checks to see if there is already a cookie set.  If not, the form handles the submission as normal. If there is a cookie, the visitor gets an alert box that says "You've already submitted your answers" and the form submission is blocked.

This is a good, cross-browser way to avoid duplicate submissions, but be aware that the visitor's browser must accept cookies and have JavaScript turned on for this method to work.

What Else You Can Do

Don't blame impatient visitors for all your duplicate submissions. A lot of duplicate FORM submissions may be an indication of problems with your Web site itself.

Often, the underlying cause is a slow-loading Web page or a slow server. If your server processes the form quickly and your form confirmation page pops right up, a visitor won't feel the need to press SUBMIT more than once!

Check out our newsletter archive for tips on how to speed up your pages:

We also offer handy online tools that help you speed up your pages and evaluate them. HTML Toolbox will alert you to slow-loading pages that can frustrate visitors and identify browser-specific code that will actually break your pages in some browsers (unlike our JavaScript).

Duplicate submissions are annoying, but a poorly-performing page is a much more serious problem. Solve that problem, and the duplicate submission issue will probably take care of itself.