We recently had a bug in our system which we eventually traced down to some odd Firefox behaviour. We’re using hidden input fields in our HTML to pass various pieces of data from the server to JavaScript code. We found that on some occasions, these hidden input fields would have different values from those sent by the server, even before any JavaScript that could change the values had run.
We realised that Firefox was using its autocomplete feature to auto-populate the hidden input fields with old values. The problem would only happen when some JavaScript had set the value of the hidden field, then the user pressed F5. The value set by the JavaScript would then reappear after the reload, even though the server sent a different value.
The solution we found (credit to Jim) is to use the non-standard HTML attribute autocomplete="off". You can also use an invisible span. The following page demonstrates the problem:
<html>
<body>
<input type="hidden" value="original" id="broken"></input>
<input type="hidden" value="original" autocomplete="off" id="fixed"></input>
<span style="display: none;" id="span_not_affected" value="original"></span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"> </script>
<script type="text/javascript">
alert("input with no autocomplete attribute: " + $("#broken").attr("value"));
alert("input with autocomplete attribute: " + $("#fixed").attr("value"));
alert("span: " + $("#span_not_affected").attr("value"));
$("#broken").attr("value","changed");
$("#fixed").attr("value","changed");
$("#span_not_affected").attr("value","changed");
</script>
</body>
</html>
Save this page as an html file and open it in Firefox. You'll get 3 alerts saying 'original', as you might expect. Reload it (F5), however, and the first alert, will say 'changed'. The other two will not be affected. Firefox has remembered the value 'changed' that was set by the JavaScript the first time round and ignored the value in the source HTML.
I’ve seen this behaviour in Firefox 3.6, but not in any of Chrome, Safari or IE6.
Hy Alex,
ReplyDeletejust stumbled into this too, it's a pity that one has to resort to using invalid or semantically wrong (spans as form elem.) markup. In my opinion it is bad behavior to autocomplete hidden fields at all.
Did you search the bugzilla for a bug filed on this, i didn't find anything on a quick search.
If there really is nothing filed we should try to build a testcase with jsfiddle or something and open a bug.
best regards
Milan Zoufal
I seem to be having this issue with mobile browsers on the android OS (gingerbread) but your blog post is the only relevant page I've found in all my googling. Trying to see if anybody else is having this issue before I go forward with a work around.
ReplyDeleteThanks for posting, somewhat confirms my suspicions but not sure.
Hello all;
ReplyDeleteI came across a similar bug that is likely related. In my case, reload made a select box disabled even though it wasn't disabled prior; see this link for the minimal test case.
http://ufd.googlecode.com/svn/trunk/issueExamples/25-minimal.html
As suggested here, autocomplete="off" is the only way around it that I know of so far.
Thanks for this information which is pretty useful for all.
ReplyDelete