///JavaScript Double Click Trapper

JavaScript Double Click Trapper

JavaScript Double Click Trapper

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 URL http://willmaster.com/a/21t/pl.pl?art211

Optionally, you can have the JavaScript do other neat things, too:

When the trap is set and the user clicks the submit button, a JavaScript alert box can display with your custom message.

When the trap is set and the user clicks the submit button, a popup box with your content can pop up.

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:

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

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

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:

Paste the JavaScript into the HEAD area of your web page source code.

Modify the JavaScript as appropriate and according to the instructions in the code.

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 frusration of the user.

2010-05-26T11:37:00+00:00 April 12th, 2005|JavaScript|0 Comments

About the Author:

Leave A Comment