Simplest way to disable button on submission of a form?

Similarly Ive seen a few examples, this one allows you to alter how long the button is disabled for, through timeout. It also only triggers on a form submit rather than on the buttons click event, which originally caused me a few issues.

    $('form').submit(function () {
        var button = $('#button');
        var oldValue = button.value;
        var isDisabled = true;

        button.attr('disabled', isDisabled);

        setTimeout(function () {
            button.value = oldValue;
            button.attr('disabled', !isDisabled);
        }, 3000)
    });

Simple and effective solution is

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Source: here


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/


You could try using the following code:

$(document).ready(function(){
   $(".once-only").click(function(){
      this.submit();
      this.disabled = true;
      return true;
   });
});