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:

  $(".class-on-my-submit-button").click(
    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: http://www.google.com/support/forum/p/Chrome/thread?tid=152f74d4890dc84f&hl=en)

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; }
        $(this).addClass('my-disabled-class');
        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.

• Log in to read full content