Simplest way to disable button on submission of a form?

Question

I\'ve been trying to find the \"right\" way to prevent double submits of forms. There are lots of related posts on SO but none of them hit the spot for me. Two questions b

Answer 1

You can use jQuery's submit(). In this case, it should look something like this:

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

Here is a working jsFiddle (made by Mike) - http://jsfiddle.net/gKFLG/1/.

If your submit-button is not a direct child of the form-element you will need to replace children with find. Additionally, your submit-button may also be a button element instead of an input element. E.g. This is the case if you are using Bootstrap horizontal forms. Below is a different version of the snippet:

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

Demo jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/