Question

I have a form which upload a big file to server. Something like this:

<form id="myform" action="myaction.php">
  <p>
    <!--fields -->
  </p>
  <input type="submit" class="submit" value="Send" />
</form>

I need to prevent the user resubmit the form while the previous processing is not ready. How can I disable submit button before processing and enable the button after submit action?

Answer 1

The correct way to do this in jQuery, as of version 1.6, is with the new prop() method.

Also important is that you attach the event to the form’s submit event, NOT to the submit button itself. That way if someone hits enter while filling out the form, like I’m sure we all do, the button will still be disabled.

Correct code:

$("#myform").submit(function() {
    $("#myform .submit").prop('disabled', true);
}

If you really want to block access to the form being submitted multiple times, you would stop the form from being submitted too, not just disable the button:

var myform = $("#myform");
myform.submit(function() {
    if($.data(myform.get(0), 'submitting') {
        return false;
    }

    $.data(myform.get(0), 'submitting', true);
    $(".submit", myform).prop('disabled', true);
});

All other solutions are WRONG! 🙂

Just kidding, they’ll work too, but this will catch more exceptional logic and handles the property correctly.