I sometimes forget how careful you have to be when designing applications for
end users. As a developer, I would never think to double click a submit button on
a web form. I also understand that queries and form submissions sometimes take a
few seconds and am happy to give them a little time. Some end users on the other
hand, seem to subscribe to the "I'll click until something happens" philosophy.
They'll click the submit button, and if the form doesn't immediately go away,
they'll either click the submit button again or better yet, they'll try double clicking it.
Obviously the first order of business is to make sure your form submissions are processed as
quickly as possible. Do your best to optimize those database queries and load test your site
to be sure your code scales well before you go live. Another tip is to use the Response.Flush() command
on the page that does the processing so that any buffered output is sent to the client
immediately. That way the browser doesn't have to wait until the whole page is
processed in order to start rendering the result page.
Unfortunately, even after these optimizations, there are still times when things aren't
as snappy as they should be. Whether it's plain old network latency or you've simply got
a user that's accessing your site via dial-up or a cell phone connection, we still can't
have them double clicking (and sometimes even triple clicking) our submit button.
If they do, we're likely to end up with duplicate entries in our database or shipping duplicate
orders to the same person. Either way, duplicate data costs us time and/or money.
Wouldn't it be nice if once a user clicked the button, we could "turn it off" so
that they couldn't click it again? Guess what... we can do just that and the best part is that
it's actually really easy!
The secret is in the line I've highlighted in red. It's a short piece of client-side Javascript
that is called via the OnClick event of the submit button. The code does three things:
First it disables the button so that the user can't click it again.
Then it changes the button's text so that the user gets some feedback and is informed of what's going on.
Finally it submits the form for processing.
So you can get an idea of what it'll look like, I'm including a sample below. There's
no form attached to it so nothing gets submitted, but you'll at least
get an idea of how it works. I've added a Reset button which will re-enable the
submit button after you're clicked it so you can try it a few times if you'd like.
Update: Resolving Conflicts with Javascript Form Validation
Since we published this tip, I've received a number of email indicating that
some users are running into problems where the tip's use of the submit button's
OnClick event handler is conflicting with the form's existing client-side form
validation.
Here's an example to better illustrate the issue. Instead of validating anything, I'll
use an alert pop-up box so that you can easily see when it fires and when it doesn't.
<form action="ProcessFormData.asp"
onsubmit="alert('The form is being submitted.');">
<input type="submit" id="btnSubmit" value="Submit"
onclick="this.disabled=true;this.value='Submitting...';
this.form.submit();"
/>
</form>
While both pieces of Javascript in the above code listing work fine on their own, when they are used together, the
button's OnClick event handler submits the form for the user and totally bypasses the
form's OnSubmit code.
The easiest work around is to simply consolidate the two pieces of code into one location.
For example, this code will achive the desired result.
<form action="ProcessFormData.asp"
onsubmit="this.btnSubmit.disabled = true;
this.btnSubmit.value = 'Submitting...';
alert('The form is being submitted.');"
>
<input type="submit" id="btnSubmit" value="Submit" />
</form>
If you have a tip you would like to submit, please send it to:
webmaster@asp101.com.
