jQuery – Prevent Multiple Form Submissions

You might think it’d just be a case of:

$('form input[type="submit"]').attr('disabled','disabled');

but that will prevent the form from submitting because the submit button is now disabled.

A better approach is to add a data attribute to the button and use that to determine if the form has already been submitted:

$('form').submit(function() {
    // when form is submitted for the first time
    // change button text
    // and prevent further form submissions
    if ($('form input[type="submit"]').data('submitted') == '1') {
        return false;
    } else {
        // I've also added a class and 
        // changed the value to make it obvious to the 
        // user that the form is submitting
        // but this is entirely optional
        // and you can customise this as you wish
        $('form input[type="submit"]')
          .attr('data-submitted', '1')
          .addClass('submitting')
          .val('Submitting...');
    }
});

DEMO

See the Pen jQuery – Prevent Multiple Form Submissions by Martin Carlin (@martincarlin87) on CodePen.