Place your message here

Your Guide to Professional
Web Site Design and Development

Web Development
HTML Codes
Javascript Snippets
216 Safe Colors
Web Directory
Web Resources
Internet Channels

Web Development: Business, Advertising, Internet Marketing, Promotion and Web Site Design

| Web Development | HTML Codes | HTML Tips | Javascript Snippets | 216 Safe Colors | Symbols | Recommendations |

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.


     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:

           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 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:

           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

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.