Prevent multiple form submits with jQuery in webkit/chrome


Okay, so, you don't want to submit a form twice. While there are server side ways to prevent a form from being accepted twice, it's nice to prevent the need with a little client-side prevention, too. Better user experience, as a bonus.

Using jQuery, you could do this:

    function(e) { 
        $(this).attr('disabled', 'disabled');

The problem with this is that the disabled attribute on the button prevents the form from submitting at all in webkit browsers: Chrome and Safari (ref:

Instead, add a class and check for the class' existence to determine if the form should submit or not.

$(".class-around-each-form form").submit(function(e) {
        if ($(this).hasClass('my-disabled-class')) { e.preventDefault(); return false; }
        return true;

I have a div with a class named .class-around-each-form around each form on a particular page, a quirk specific to my set up. You could use $("form").submit(...) also.

Stupid simple and frustrating if you didn't realize its need, or didn't test on all the browsers.