Preventing Your Visitors From Submitting an HTML Form
More Than Once
By
William
Bontrager
Not all CGI programs, few
in fact, check for double form submissions, those submissions that happen
when a user clicks a form submit button more than once.
Most click trappers are programmed in JavaScript.
A feature missing from all click trappers I've seen, until now, is the ability
to release the trap after a certain amount of time has elapsed.
Suppose someone uses your project estimate form. When the submit button is
clicked, the click trap is set so it can't be submitted again.
However, after submitting the form, the user realizes more information should
be provided and uses the browser's "back" button to return to the form.
The user changes the information on the form and tries to submit again. And
can't. (Some browsers may reload the JavaScript, which would release the
trap. But some browsers won't.)
The trap is set. The submit button won't respond.
If the trap had been released after say, 10 seconds, the user could have
submitted the new information.
The number of seconds can be adjusted. You want it high enough to disable
the submit button for those impatient ones who click repeatedly. Yet, you
want it low enough so the lock releases in time for those who return to change
information.
You'll see a place where you can specify that number in the JavaScript
demonstration and download code. The spot where you specify the seconds is
marked. You can pick up the JavaScript code and working example at the
demo
page.
Optionally, you can have the JavaScript do other neat things, too:
1. When the trap is set and the user clicks the submit
button, a JavaScript alert box can display with your
custom message.
2. When the trap is set and the user clicks the submit
button, a popup box with your content can pop up.
3. The first time the submit button is clicked, the
text in the submit button can change.
The number of seconds must be specified
in the script, but the list of three items above are all optional.
JavaScript Alert Box
To display an alert box when the trap is set and the submit button is clicked,
simply find the spot marked in the JavaScript and, between the quotation
marks, type the message you want to display in the alert box.
If you use any quotation marks in the alert box message itself, precede them
with a backslash character, like: Click the \"Ok\" button.
To cause a line break, use the backslash character and lower-case n character
pair. To cause a blank line, type the pair twice, like: "Hello!\n\nAgain!"
If you do not want to display an alert box, simply remove any message between
the quotation marks.
Popup Box
To display a popup box when the trap is set and the submit button is clicked,
specify the URL of the page to display within the popup. You may also specify
the pixel height and width of the popup. If you don't specify those dimensions,
the JavaScript will default to 200 and 300 pixels.
Submit Button Text Change
If you want the text of the submit button to change when it's first clicked,
"Now Processing ..." for example, or "Stop! Not again!", three items of
information must be provided:
1. The form's name. This is the name="______" you have
in your FORM tag. If you don't have one, put one in.
Example:
<input
method="post"
name="myform"
action="/cgi-bin/script.cgi">
2. The submit button's name. This is the name="______"
you have in your submit button tag. If you don't
have one, put one in. Example:
<input
type="submit"
name="mybutton"
value="Click Me">
3. The new text for the submit button.
If any of the above three are missing,
the JavaScript will abort the submit button text change.
Note that the new submit button text should be no longer than the original.
That's because some browsers won't enlarge the submit button even if not
all of the text will fit.
Implementing the JavaScript
To implement this Double Click Trapper, download the working example from
http://willmaster.com/a/21t/pl.pl?art211 and then:
1. Paste the JavaScript into the HEAD area of your web
page source code.
2. Modify the JavaScript as appropriate and according
to the instructions in the code.
3. Put an
onClick="return DoubleClickTrapperAction();"
attribute into the submit button tag. Example:
<input
type="submit"
name="mybutton"
onClick="return DoubleClickTrapperAction();"
value="Click Me">
Then, upload the page to your server
and test it.
And may it reduce your frustration while never increasing the frustration
of the user.
Will Bontrager
About the Author:
Copyright 2003 Bontrager Connection, LLC
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
