administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

One line of code to prevent double submits »

FERDY CHRISTANT - OCT 11, 2011 (07:31:44 PM)

I don't post many tech tips anymore, so here is a simple yet powerful one:

 $("form").live("submit",(function(e) {  $('button[type=submit]', this).attr('disabled', 'disabled'); }));

That single line of jQuery code, when included across all your pages, will work on all forms in your web application by allowing a submit, yet not a double-submit. You'd be surprised how many people double click on submit buttons. I could tell in JungleDragon by seeing duplicate comments. This single line solved it for me across the application.

A few notes:

  • I'm using the button element in my markup, if you're using "input", change the code accordingly
  • You can style disabled buttons in CSS using this selector: form button[disabled]{} (or form input[disabled])
  • Be careful in case you have events running before a submit, you could end up in a state where the user corrects their input after a failed submit, yet find the submit button still disabled because of the previous attempt.

I didn't think of this myself, just passing it on. I don't recall exactly where I found it.

Share |
RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.