]> Disabling submit button after submit in Chrome 🌐:aligrant.com

Disabling submit button after submit in Chrome

Alastair Grant | Monday 23 October 2017

So you have a web page that submits a form - which updates a database or something and kicks off an action (e.g. emailing somebody).  Your user-base aren't the last word in computer literacy and sometimes you'll get a double-submit action.  Irritating.

The obvious fix for this is to disable the submit button after clicking it.  Ensuring that the page only submit once.  If the submit times out, then the user will be presented with a browser error - which can be resubmitted if the browser supports it.

Just - it doesn't work as expected when in Chrome.  If you have an event handler on the submit button of a form to disable itself, then the form will not ever get POSTed, irrespective of whatever you return.

Fortunately the fix is simple enough, if not immediately obvious - disable the form instead of the button (and it's anybody guess why this works yet disabling the button does not).

HTML:

<p><input name="data" type="text" /> <input id="submitButton" type="submit" /></p>

JavaScript:

// Using lazy programmer's jQuery library
$('#myform').on('submit', function() {
   $('#submitButton').attr('disabled','disabled');
}
Breaking from the voyeuristic norms of the Internet, any comments can be made in private by contacting me.