Question

I have a web form for which I want to prevent multiple submissions. In production, this is accomplished by the submit button having an onclick="this.disabled=true" attribute. This way, if the form is submitted and then the user goes back (presumably to “edit” the data, which our users seemed to want to do from time to time), the submit button remains disabled.

This works fine in Firefox, Safari, and Internet Explorer. In Chrome, however, the disable seems to fire before the form submission, thus preventing it from happening. In order to work around this, I changed the button’s onclick action to:

this.disabled=true; $('myform').submit()

This results in the form being submitted, but when I use Chrome’s back button to return to the form page, the button is no longer disabled. Values I entered into the form before submitting remain, so my guess is that Chrome must be selectively reloading the DOM.

Is there any way to accomplish what I want with Javascript in Chrome? There are other ways to solve this problem, of course, but disabling the button has a highly attractive simplicity to it.

I’ve tested in Chrome 12.0.742.100 in Linux, and 12.0.742.112 in MacOS X.

Answer 1

Consider instead using the form’s submit to disable the button.

In any case, you sould be dealing with this at the server, there are other ways to submit a form without using the submit button. Disabling the button will not prevent the user from re-submitting the form.