Disable button after submit with jQuery

Solution 1:

Try this:

$('form').submit(function() {
  $(this).find("button[type='submit']").prop('disabled',true);
});

Solution 2:

I like this, don't have to traverse the DOM. Put function on a setTimeout function, this allows make submit and after disable button, even if setTimeout is 0

$(document).ready(function () {
$("#btnSubmit").click(function () {
    setTimeout(function () { disableButton(); }, 0);
});

function disableButton() {
    $("#btnSubmit").prop('disabled', true);
}
});

Solution 3:

You could disable it upon the parent form's submit event:

$("form").on("submit", function () {
    $(this).find(":submit").prop("disabled", true);
});

Be sure to run this code only after the HTMLFormElement has been loaded, or else nothing will be bound to it. To ensure that the binding takes place, fire this off from within a document-ready block:

// When the document is ready, call setup
$(document).ready(setup);

function setup () {
    $("form").on("submit", function () {
        $(this).find(":submit").prop("disabled", true);
    });
}

Solution 4:

Something like this might work.

<button id="btnSubmit" type='submit'> Send </button>

<script>
     $("#btnSubmit").on("click", function(e){
          e.PreventDefault();
          $(this).closest("form")[0].submit();
          $(this).prop('disabled',true)
     });
</script>