Use JavaScript to Prevent Duplicate HTML Form Submissions
By
William
Bontrager
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:
1. The alert box.
2. The submit button text change.
3. The silent click trapper.
4. The lenient click trapper.
5. The communicating click trapper.
6. The CGI script method.
The Alert Box
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.
The CGI Script Method
This method compares the information submitted by the form with information
submitted previously. If there is a match, it's considered a duplicate submission
and the information is not processed.
If the script does error checking, the duplicate submission check should
be done after the error checking.
Rather than providing generic instructions, let's modify Master Feedback
version 2.5 from
http://willmaster.com/master/feedback/
Master Feedback needs to be customized in 4 places. We'll start at the bottom
of the file and work up so the original line numbers apply.
1. At line 123, you'll find the line
close MAIL;
Immediately below that line, insert this line:
BOTTOM:
(That's a colon, not a semi-colon, at the end of
the line.)
BOTTOM: is a label to which the program flow will
jump if it detects a duplicate form submission.
2. At line 99, you'll find the line
$In{realname} =~ /\@/;
Immediately above that line, insert these ten lines:
$This .= "\n";
my $match = 0;
open R,"<$CheckFile";
while(<R>) { if($_ eq $This) { $match++; last; } }
close R;
goto BOTTOM if $match;
if(-e $CheckFile) { open W,">>$CheckFile"; }
else { open W,">$CheckFile"; }
print W $This;
close W;
The above checks a file to see if this is a duplicate
submission.
If it is, program flows jumps to the label you
inserted in step 1, bypassing all the emailing
routines. If it is not, the program adds the form
submission to the file, then continues the normal
flow.
3. At line 70, you'll find the line
my @p = split(/&/,$buffer);
Immediately above that line, insert this line:
$This = $buffer;
The line will assign the entire form submission
to the variable $This, which will be used to do
comparisons.
4. At line 351, you'll find the line
require 5;
Immediately below that line, insert these 2 lines:
my $This = '';
my $CheckFile = 'checkfile.txt';
In the first of the two lines, those are two
apostrophe characters (not a quote character).
In the second of the two lines, between the
apostrophes, is the name of the file which the
script will use to verify that form submissions
are not duplicates. You may change the file name
as appropriate. The file can be put into another
directory, too, if you want, by specifying the
complete server path with the file name. (The
directory would need write permissions.)
You'll probably need to delete the check file once
in a while. How often depends on how much your
form is used. The reason for deleting the file is
because the script will slow down once it gets very
big. Once a file grows larger than about 100k, it
should be deleted.
With those modifications, Master
Feedback won't send its email if the form submission is a duplicate.
---
Those are six ways to prevent multiple form submissions.
The CGI method can be used in conjunction with a JavaScript method if you
want to ensure that even JavaScript disabled browsers can't be used for 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
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
