Form submit button remains disabled when using Back button in Firefox

Question

I'm using some jquery to disable a form submit button after it's been clicked to prevent accidental repeated clicking. This works fine in all browsers except Firefox. In Firefox if the user uses the browser Back button to go back to a page after the submit button disabling has occurred, the submit button is still disabled. Is there any solution to this problem?

Telex

Add an empty unload handler. The reason is discussed in this related question: Cross-browser onload event and the Back button – Selfcentered

Answer 1

Probably, you should add autocomplete="off" parameter to your form

<form autocomplete="off">
  <input type="submit" />
</form>

Niklaus

It's bizarre to me that Firefox considers the state of a button part of "autocomplete"... but anyway, thanks for the clean solution. BTW, this happens not only when going back with the browser, but when swapping in a new version of the form via Ajax. – Unbated

Answer 2

$(document).ready(function() {
    $('input[type=submit]', this).attr('disabled', false);

    $('#myform').submit(function(){
        $('input[type=submit]', this).attr('disabled', true);
    });    

});

Using jQuery, this will make the button not disabled upon using the back-button on the browser. Tested on FF 3.5.

Morvin

Actually this isn't correct - $(document).ready() won't fire when the back button is pressed; nor will any inline scripts. It's best to use the window.onpageshow event, although if you need to support IE10 or below then you're out of luck. More info here: #2638792 – Altazimuth

A short addendum to my comment above: this applies to modern browsers only, which will cache the entire page (including any edits made by scripting). So, Erik's answer above would have likely been correct at the time it was posted - and it'll still work in IE10 and below - but if you're finding this answer in 2017 or later then do be careful. – Altazimuth

Answer 3

If a browser has caching disabled, then the page will be reloaded as if nothing had happened (no button clicked).

If you want client side, you could use a cookie.

Now, if you have a a server side technology (PHP/Rails), then you could put the value in the session variable.

Humber