Notice: With the launch of Adobe Cookbooks, this site will no longer be accepting new entries or posting new content. Thanks to everyone who submitted content!

How do you stop users from clicking the submit button more than once?

If there is a form submission that may take a while, many users will click the submit button multiple times. One way to prevent that from happening is to add a bit of javascript to a form button that disables the button on the first submit. For example:

<INPUT TYPE="Button" VALUE="Submit" onClick="if(this.value == 'Submit') this.form.submit(); this.value = 'Please Wait.';this.disabled=true;">

Of course this depends on Javascript being turned on in the user's browser. Another option is to use ColdFusion's built in form handling with and . The tag has a validate option "SubmitOnce", that will prevent users from submitting the form more than once.

<cfinput type="submit" name="submit" value="Submit" validate="SubmitOnce">


This question was written by Larry C. Lyons.
It was last updated on January 11, 2006 at 11:45:24 AM EST.

Categories

Forms

Comments

Comment made by Chris Rockett on January 11, 2006 at 8:50 AM
Doesn't the CFINPUT also use javascript, just writing it for you in the page header?

Comment made by Raymond Camden on January 11, 2006 at 9:01 AM
As far as I know, yes. I don't think the entry implied it didn't.

Comment made by charlie griefer on January 11, 2006 at 11:44 AM
Well, the entry states that the first option "depends on Javascript being turned on in the user's browser". There's no such caveat for the <cfinput> entry.

So there might be an implication there (that the <cfinput> has no such dependency).

Comment made by Cal on January 11, 2006 at 6:12 PM
I've tried every version of the javascript way I can find and it does not work with the newest patched version I.E. on our computers, works great in Firefox. I think it has something to do with disabling the value after submitting, it just won't do it. And our version of CF does not support validate="SubmitOnce". Quite the headache!

Comment made by ErikG on January 11, 2006 at 6:43 PM
If IE doesn't like changing the values after the form has been submitted, then change them *before* the submit...

<code> <INPUT TYPE="Button" VALUE="Submit" onClick="if(this.value == 'Submit') {this.value = 'Please Wait.';this.disabled=true;this.form.submit();}"> </code>

While it may be beyond the scope of the question, if there was a timeout with the server, using this method will forever "lock" the form from being submitted again. When I have used JavaScript in the past, I have always used a function with a SetTimeout to re-enable the submit button after some period of time. This way you for sure eliminate double click submits, but you don't completely screw users who either experience an error, or click stop and edit their data. Which means that you still need to handle the "double post" issue in your ColdFusion code. The question was about form submission, not how to eliminate double posts however - which is another topic.

Comment made by Bob Clamtrot on January 13, 2006 at 4:12 PM
For a NON-JAVASCRPT ColdFusion solution see...

http://wiggy.coldfusionjournal.com/thats_the_ticket_preventing_double_form_submission_without_j.htm

Comment made by Simon on December 10, 2008 at 10:14 PM
You could try onclick="this.width=0" and hide it.