Multiple Form Submission Prevention

Several methods exist to prevent users from clicking a form's submit button more than once. Their effectiveness ranges from merely alerting the user that the form is being processed to an essentially 100% effective duplicate block. The methods presented here start with alerting methods and progress to the more effective.

The method or methods you choose will depend on how critical it is that duplicate form submissions are prevented. If it's not critical, such as causing a few extra keystrokes to delete duplicate submissions, an alert may be most appropriate. If more critical, such as submitting credit card information, employ a more effective method.

The last method presented here is a CGI method. The others employ JavaScript. The JavaScript methods can be effective only when the user's browser is JavaScript enabled.

Here is a list of methods presented in this article:

• The alert box.

• The submit button text change.

• The silent click trapper.

• The lenient click trapper.

• The communicating click trapper.

There are other methods, of course. One is to replace the submit button with a "loading" image. More methods may be added to this website from time to time. Make generous use of our search box.

The Alert Box

Note: With this method, when the submit button is clicked the submission proceeds after the alert box's button is clicked.

When a form user clicks the submit button, an alert box can pop up to inform the user that the form information is being processed. It can be done with the onClick="______" attribute, like this:

<input type="submit" 
onClick="alert('Thank you for your participation!')" 
value=" S U B M I T ">

Change the alert's message as appropriate for your implementation. Note that, except for the ones on each end, any apostrophe in the message must be preceded with a back slash; i.e.: \'

To insert a line break in the alert's message, use: \n

The Submit Button Text Change

When a form user clicks the submit button, the text on the submit button can change.

With some browsers, the form submit button will enlarge if the replacement text requires it. On other browsers, excess replacement text is cut off because the submit button does not enlarge.

To work around the submit button size inconsistency, ensure that the original text takes up as much space on the button as the replacement text will. You can add spaces before and after the original text to accomplish this.

Example:

<input type="submit" 
onClick="this.value='Processing Information'" 
value=" S U B M I T ">

Change the button replacement text as appropriate for your implementation. Again, any apostrophe in the message itself must be preceded with a back slash; i.e.: \'

The Silent Click Trapper

When a form user clicks the submit button, some JavaScript can check if the submit button has previously been clicked. If this is the first click, allow the submission. Otherwise, prevent the submission.

First, put this JavaScript somewhere above your form (it can be in the HEAD area, if you prefer to keep all your JavaScript in one place):

<script type="text/javascript" language="JavaScript"><!--
counter = 0;
function monitor() {
counter++;
if(counter > 1) { return false; }
return true;
} // --></script>

Then, put the onClick="return monitor()" attribute into the submit button tag:

<input type="submit" 
onClick="return monitor()" 
value=" S U B M I T ">

Now, when the submit button is clicked, it will consult the JavaScript function monitor(). The function will return "true" or "false," depending on whether or not the same user has previously clicked the button. If "true" is returned, the form submission will proceed. If "false" is returned, the submission will not proceed.

The Lenient Click Trapper

If your form handling script issues error messages that would require the form user to make corrections before re-submitting, then you'll want something in place that will allow the re-submission. This lenient click trapper won't lock out the form user.

The idea is that the form user is likely to click the submit button again if the previous click didn't result in a submission. So the lenient click trapper allows the submission to go through if the user clicks more than a specified number of times.

This is like the silent click trapper, above, except use the following JavaScript:

<script type="text/javascript" language="JavaScript"><!--
start_over_at = 3;
counter = 0;
function monitor() {
counter++;
if(counter >= start_over_at) { counter = 1; }
if(counter > 1) { return false; }
return true;
} // --></script>

The above will allow the click if it is click number 1. And it will allow click number 3, restoring the counter to 1.

I used the number 3 in the example for the following reason: If the form processing script does find an error and the user has to correct something, the next submission is click number 2 or 3. If 2 and the click doesn't go through, the user clicks again. Thus, the form information is submitted. Also, if there is no error on the first submission, it is unlikely that the form user will click the submit button 3 times before the page changes.

You can change that number 3 to any number you prefer. The number is assigned to the variable start_over_at in the second line of the JavaScript.

The Communicating Click Trapper

This works similar to the lenient click trapper, above, with the additional feature of displaying an alert box with explanation whenever the click count equals 2. Use this JavaScript:

<script type="text/javascript" language="JavaScript"><!--
start_over_at = 3;
counter = 0;
function monitor() {
counter++;
if(counter >= start_over_at) { counter = 1; }
if(counter == 2) { 
alert('Sometimes the servers are a bit slow. ' + 
'One click is sufficient.\n\nI\'m sure the ' + 
'server will respond in a few seconds.\n\n' + 
'Thank you for your patience.');
}
if(counter > 1) { return false; }
return true;
} // --></script>

You can change the number 3 in the same manner as with the lenient click trapper. And you can change the alert box's message as appropriate for your implementation.

Those are five ways to prevent multiple form submissions.

If you use a JavaScript method, use only one JavaScript method. Using more than one JavaScript method could result in conflict.

Will Bontrager