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

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
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?

QUICK TIP:
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"
    onclick="this.disabled=true;this.value='Submitting...';
             this.form.submit();"

  />
</form>

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


Previous      Show All Tips      Next

If you have a tip you would like to submit, please send it to: webmaster@asp101.com.


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

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