WillMaster Possibillites Logo EzineSeek Award
Submit Button
Multiple Click Trapper
by
William Bontrager

Permission is granted to reprint the article below in its entirety provided no changes are made to the article text and the author's name, signature lines, and copyright line are printed with the article. However, you may change the article's title.

Once again, someone clicked your submit button twice.

Now you have another duplicated free for all link. Or you have a duplicate email from your feedback form. Or your subscription form has just generated two subscription requests.

Here are the two simple steps that can give you some peace:

(1)
Insert this somewhere in the <head> and </head> section of your HTML page: 


<script language="JavaScript">
<!-- Copyright 2000 by William and Mari Bontrager.
counter = 0;
function count() {
counter++;
if(counter > 1) {
if(counter > 2) { return false; }
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.');
return false;
}
return true;
} // -->
</script>

(2)
Insert this within your <input type="submit" ... > form tag: 


onClick="return count()"

That's all there's to it.

Now, whenever someone clicks the submit button a second time, they will get a diplomatic message saying that only one click is required and that the server should be responding in a few seconds. It only works for browsers which are JavaScript enabled, which is most browsers in use today. (The message is presented only once because a browser we tested would crash when the message was presented twice and the "OK" button was clicked after the CGI program answered.)

The second and subsequent clicks from your visitor never reach your CGI program, only the first click.

If your <input type="submit" ... > form tag looked like this before the change: 


<input type="submit" value="Send">

It would look like this after the change: 


<input onClick="return count()" type="submit" value="Send">

The message in the alert box may be changed to whatever you prefer. The message text is between the apostrophes (single quotes). If you have an apostrophe within your message, type a reverse slash before the apostrophe. To insert a line break, use: 


\n

If you would rather not display any message but still trap second and subsequent submit button clicks, use the following code in your <head> and </head> section of your HTML page (instead of the code presented earlier): 


<script language="JavaScript">
<!-- Copyright 2000 by William and Mari Bontrager.
counter = 0;
function count() {
counter++;
if(counter > 1) { return false; }
return true;
} // -->
</script>

A demonstration page is at http://willmaster.com/possibilities/demo/singleclick.html The CGI program behind the form has an intentional ten second delay to give you plenty of time to do multiple clicks on the submit button.

Have fun!

Copyright 2000 by William Bontrager

William Bontrager, Programmer and Publisher
"Screaming Hot CGI" programs
"WillMaster Possibilities" e-Newsletter
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com