Bug With Firefox - Disabled Attribute of Input Not Resetting When Refreshing

Asked 12/5, 2011 at 23:49 Answered 20/3, 2020 at 12:51

113

I've found what I believe to be a bug with Firefox and I'm wondering if this actually is a bug, as well as any workarounds for this.

If you create a basic webpage with the following source:

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div>
      <input id="txtTest" type="text" />
      <input type="button" onclick="$('#txtTest').attr('disabled','disabled');" value="Set Disabled (jQuery)" />
      <input type="button" onclick="document.getElementById('txtTest').disabled = true;" value="Set Disabled (js)" />
      <input type="button" onclick="$('#txtTest').removeAttr('disabled');" value="Remove Disabled" />
    </div>
  </body>
</html>

If you disable the textbox dynamically and then refresh the page, the textbox will remain disabled instead of resetting back to its original state of not disabled. I've tried this in IE8 and Chrome and those behave as I would expect, resetting the textbox back to not disabled when I refresh.

Another interesting bit of information is that it still does the same thing if the input is a checkbox instead of a textbox.

Pectinate answered 12/5, 2011 at 23:49 Comment(6)

Are you sure it's not just the Firefox "feature" where it remembers the state of input elements when you simply refresh? – Thread 12/5, 2011 at 23:51

@thirtydot: I was wondering about that too, so I also tried experimenting with dynamically setting the "size" attribute, and that does get reset upon refresh, just like all the other browsers. So it looks like what I've discovered so far is that Firefox will retain the disabled attribute as well as the actual value of the input, but not the size... – Pectinate 12/5, 2011 at 23:56

Wow, you're right! I set autocomplete="off" on the input and this no longer happens. That's pretty inconvenient that firefox turns that on by default! – Pectinate 12/5, 2011 at 23:58

Yeah, I'd forgotten you can disable it with autocomplete="off". This blog post looks familiar to me, so I've definitely come across this before. You should write an answer to your own question (or should I?) – Thread 13/5, 2011 at 0:6

There is an open Mozilla bug report about this: bugzilla.mozilla.org/show_bug.cgi?id=654072 – Stanley 3/9, 2014 at 23:57

46845 - Form elements don't reset upon manually reloading page - bugzilla.mozilla.org. This report was opened 22 years ago and closed 17 years ago. – Laporte 28/3, 2022 at 17:14

141

This is a "feature" of Firefox which remembers form input values across page refreshes. To fix this behavior, you simply set autocomplete="off" on the form containing the inputs, or just directly to the input.

This stops autocomplete from working and prevents the browser from remembering the state of input fields.

Alternatively, you can just "hard-refresh" by clicking CTRL+F5. This will completely reset the current page.

Pectinate answered 13/5, 2011 at 15:49 Comment(8)

I just hit this problem when the user clicks the back button, seems like autocomplete="off" doesn't work in that case. – Be 2/9, 2012 at 4:54

i don't want a form, I just have a single button and Firefox "remembers" it's disabled..annoying. I can reset it via JS but..ugly. – Yun 7/5, 2013 at 21:43

@Yun Try setting it on the button/input element. Should work, too! – Roer 9/7, 2013 at 12:8

You even have to do this on buttons. I find it hard to believe that this is a feature and not a bug? – Afterworld 26/3, 2014 at 10:7

this also affects hidden inputs also – Afterworld 26/3, 2014 at 10:46

This was driving me nuts. I am using a jQuery button. Command - Refresh and the button was enabled, but a regular refresh and it was not. Made no sense, thanks @stephen-mesa. – Misogyny 2/12, 2015 at 9:11

Setting it on the form is a little over-the-top, but sadly MDN says it ignores the attribute on basically all but type=text - the english page linked me here, yet the german page mentions the ignore issue (the autocomplete paragraph is currently still in english!) QUOTE: This attribute is ignored if the value of the type attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). – Kealey 20/12, 2015 at 10:8

First time encountering this issue and your solution worked out of box. But i set it only on the button rather than the whole form, as autocomplete is a great feature for fields too. Thanks – Ozonize 3/8, 2018 at 22:38

To deal with the back button, do this (from here)

    window.addEventListener('pageshow', PageShowHandler, false);
    window.addEventListener('unload', UnloadHandler, false);

    function PageShowHandler() {
        window.addEventListener('unload', UnloadHandler, false);
    }

    function UnloadHandler() {
        //enable button here
        window.removeEventListener('unload', UnloadHandler, false);
    }

Xenon answered 27/12, 2013 at 11:11 Comment(3)

I don't know why this answer has only one up vote while the other answer has 99. Restoring the disabled state on unload is better than disabling autocomplete, since autocomplete is a desirable functionality. – Trici 13/2, 2017 at 4:4

I think that //enable button here is redundant here; my comprehension of referred docs is that simply the presence of event listener will prevent the page to be stored in the BFcache. – Spaetzle 12/6, 2018 at 9:50

Note that adding an unload handler has other side effects in Firefox: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/… – Gullett 7/12, 2018 at 1:12

This is indeed an open bug in Firefox. There is also a note in MDN: autocomplete (scroll down to the second yellow box):

Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply by virtue of its type. See bug 654072.

If you are using Bootstrap, you might be interested in the

Transponder answered 20/3, 2020 at 12:51 Comment(0)

As mentioned before you need to add autocomplete="off" to your buttons.

Here is a sh+perl snippet to automate this in the case of <button>s in your HTML files/templates (under some assumptions):

find /path/to/html/templates -type f -name '*.html' -exec perl -pi -e \
  's/(?<=<button )(.*?)(?=>)/@{[(index($1,"autocomplete=")!=-1?"$1":"$1 autocomplete=\"off\"")]}/g' \
  {} +

The assumptions are:

Opening <button> tags begin and end on the same line. If this is not the case (i.e. they might be split over several lines) then replacing /g with /gs should help (the s modifier causes . to match newlines as well)
Valid HTML (e.g. there are no funny characters between < and >) and no unescaped greater than (>) inside the opening tag.

Predictory answered 30/8, 2017 at 17:15 Comment(0)

Recommended topics

Hot tags