ASP 101 - Active Server Pages 101 - Web05
The Place ASP Developers Go!

Please visit our partners

Windows Technology Windows Technology
15 Seconds
ASP 101
ASP Wire
VB Forums
VB Wire
internet.commerce internet.commerce
Partners & Affiliates

ASP 101 is an site
ASP 101 is an site
Internet News
Small Business
Personal Technology

Corporate Info
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash

 Top ASP 101 Stories Top ASP 101 Stories
An Overview of ASP.NET
Connections, Commands, And Procedures
What is ASP?

Never Use CreateObject
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates

Quick Tips

Stop Users from Double Clicking

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!

Take a look at the sample HTML below:

<form action="ProcessFormData.asp">
  <input type="submit" id="btnSubmit" value="Submit"


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:

  1. First it disables the button so that the user can't click it again.
  2. Then it changes the button's text so that the user gets some feedback and is informed of what's going on.
  3. 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"


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

Previous      Show All Tips      Next

If you have a tip you would like to submit, please send it to:

Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback
The Network for Technology Professionals



Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers