Stopping the dreaded double-form submission with jQuery

When developing forms, we web developers always have to guard against the dreaded double-form submit, when impatient (or even patient) users, depending on the latency of form submissions, hit the “submit” or “enter” button multiple times, causing havoc to the application.

Using the jQuery javascript library, preventing this on the client side is actually pretty easy. First, make sure you have jQuery included in your app. Then, use this code:

$("form").submit(function() {
    $(":submit",this).attr("disabled", "disabled");
});

This disables the submit button immediately after the first click, so the user cannot click it more than once.

Advertisements

About buffalobillion

Web Developer, JavaScript Balrog, Java dude, Ruby/Rails enthusiast. Guitar Playa.
This entry was posted in Web Dev. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s