Tag Archives: html

Disabled submit buttons in Chrome

There is an interesting difference in the way Chrome handles disabled submit buttons that is worth keeping in mind when developing for different browsers.

disabled submit

When the user clicks a button — particularly a submit button — it is often useful to disable the button so the user can’t accidentally click it multiple times. Multiple clicks would lead to undesirable results, such as a blog post being submitted twice or, worse, a sales order being executed more than once.

Let’s consider an HTML form called my-form with a button named submit-button.


<form id="my-form">
    <!--Form elements would go here-->
    <button id="submit-button" type="submit">Submit</button>
</form>

The following JavaScript (which relies on jQuery) will work on non-Chrome browsers.

     
$('#submit-button').on('click', function (e) {
    $(this).attr('disabled', 'disabled');
});

This event is triggered when the submit-button is clicked. It sets the button’s disabled attribute. Afterwards, the browser will submit the form.

To get the above code to work in all browsers, make the following changes.

     
$('#submit-button').on('click', function (e) {
    e.preventDefault();
    $(this).attr('disabled', 'disabled');
    $('#my-form').submit();
});

The first line will disable the browsers default behavior (e.preventDefault();) — which is to submit the form. Then we disable the button like we did before. Finally, the form is submitted imperatively by the JavaScript.