Why does the checkbox stay checked when reloading the page?

Question

I'm reloading a web page that has the following code:

<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" value="1" />

Even though the HTML stays sent to the browser is the same for each reload of the page, the checkbox always takes on the checked value when a reload was performed. In other words, if the user checks the checkbox and reloads, the checkbox is still checked.

Is there some caching going on here?

Edit: I tried Gordon Bell's solution below and find that this is still happening even after removing the value="1". Anything else I might be missing?

<label for="showimage">Show Image</label> 
<input id="showimage" name="showimage" type="checkbox" />

score 201 · Answer 1 · edited Jun 09 '12 at 00:50

201

Add autocomplete="off" into the form element on the page. The downside is that this isn't valid XHTML, but it fixes the issue without any convoluted javascript.

edited Jun 09 '12 at 00:50

TALlama

16,017
8
38
47

answered Jan 22 '09 at 22:39

1

Works for me, where the cache-control header does not. – Lajos Mészáros Jul 09 '14 at 11:01
8

From what I'm [reading](http://www.w3schools.com/html/html_form_attributes.asp), it _is_ actually valid in HTML5. (I upvoted previous comment before I read more on the subject.) So use autocomplete off to your heart's content on checkboxes if you're using HTML5. – EF0 Jan 23 '15 at 16:13
8

Over 10 years later. This answer saved me a headache! – Daan van den Bergh Mar 26 '20 at 20:53

score 38 · Accepted Answer · edited Feb 19 '17 at 16:17

38

Yes, I believe it is caching. I see this behaviour on Firefox for example (not Safari, for what that's worth :) ).

you can reload the page and bypass the cache (on Firefox) using CTRL-SHIFT-R and you'll see the check value doesn't carry (a normal CTRL-R will grab the info from the cache however)

edit: I was able to disable this server side on Firefox, setting a cache control header:

Cache-Control: no-store

this seems to disable the "remember form values" feature of Firefox

edited Feb 19 '17 at 16:17

Philip Kirkbride

21,381
38
125
225

answered Nov 18 '08 at 19:28

Owen

82,995
21
120
115

Yup, CTRL-SHIFT-R causes the checkboxes to be reset. Is there a way to prevent this from being cached? – readonly Nov 18 '08 at 19:33
i don't think so (at least not from the server side). firefox is really aggressive in caching things. i've only been able to get it to stop caching reliably in situations like this from the client side – Owen Nov 18 '08 at 19:41
Not related to cacheing as such, just that a hard-reload also turns off the deliberate feature of remembering form contents. The same behaviour also affects text fields, menus etc. – bobince Nov 18 '08 at 21:11
2

it's grabbing values from it's cache, thus it's caching. unless i've misunderstood what you're trying to say. – Owen Nov 19 '08 at 00:28
2

Firefox's aggressive caching is a major PITA and is always catching me out when developing against it. I've not tried the Cache-Control header before but if it works stackoverflow just justified the time I spend here completely. – Cruachan Nov 19 '08 at 00:35
1

The values are not coming from “the cache” as in Firefox's downloaded file store. eg: If you navigate away and then follow the same URL, the page is cached but the values will not be. By breaking the cache you can force a hard-reload, but it's only coincidence that this also disables the feature. – bobince Nov 19 '08 at 11:51
sounds like semantics to me :) just because they may not be from the same cache doesn't mean they're both not cached. – Owen Nov 19 '08 at 21:06
@Owen - Say we are testing any webpage which has check boxes. Per business rules, we do not want to save those checked values unless a save/submit button on the page is clicked. To test every such page, do we need to include a test case which simply tests that all boxes are unchecked upon page reload ? – MasterJoe May 15 '17 at 06:35
In FF 62.03 on Mac, setting Cache-control does not prevent caching of checkbox values. I set autocomplete=off instead. – Jonny Perl Oct 11 '18 at 14:49

score 37 · Answer 3 · edited Aug 25 '10 at 23:26

37

set autocomplete="off" with js is also working well.

for example using jquery:

$(":checkbox").attr("autocomplete", "off");

edited Aug 25 '10 at 23:26

Matt Ball

354,903
100
647
710

answered Jul 14 '09 at 04:03

RainChen

531
4
10

1

I found that you needed `$("#formId").attr("autocomplete", "off")` where `#formId` is the id of your form. – Dan Diplo Apr 05 '12 at 14:58
@DanDiplo there are many occasions where we use a check-box without a form therefore its illogical to apply ("#formId").attr("autocomplete", "off") – Clain Dsilva Jan 28 '14 at 17:12
2

@ClainDsilva Just because you _may_ use a checkbox outside a form doesn't mean anything I said is illogical. You might claim it is not totally comprehensive (though it works for most scenarios) but to say it's not logical is bizarre given it works. – Dan Diplo Jan 29 '14 at 20:14
@DanDiplo when we can apply auto complete off on checkbox alone, it works fine on that way, I agree that your solution does work but it also applies on all the element within form box. That however may not be the intended behavior. The question was narrowed to checkbox alone and not the entire form. With all due respect, I just want to find the best solution tailored to the question. On this context applying autocomplete off for entire form is not right. – Clain Dsilva Jan 31 '14 at 07:20
@RainChen It's a good feature from firefox, but sometimes good features for users turn out to be headache for Developers. It worked for me! Thanks a lot. :) – Nikhil Nov 24 '17 at 09:22

score 3 · Answer 4 · answered Jun 25 '19 at 18:12

This is an old question but still an active issue for firefox. None of the responses i tried solved it, but what did solve it for me was simply this:

    document.getElementById('formId').reset();

This simply resets the form to the default options every time the page loads. Not ideal since you lose granular control, but its the only thing that solved this for me.

score 1 · Answer 5 · answered Nov 18 '08 at 21:04

1

It is a nice feature of Firefox: if you type something but reload the page, the text remains in the text area. Idem for other settings you have chosen.

Alas, it doesn't work in SO (probably reset by JS) and dumber browsers like IE...

Which suggest a solution: if you really need to do that, reset the form with JS. form.reset() might do the job (acts like the Reset input button).

answered Nov 18 '08 at 21:04

PhiLho

40,535
6
96
134

1

Seems a bit hacky, or like shooting a sparrow with a cannon. – Lajos Mészáros Jul 09 '14 at 10:55
@MészárosLajos What is hacky / overkill, and why do you see it as such? Do you see something simpler? – PhiLho Jul 11 '14 at 12:07
What if you only want the form parially to reset? I, personally, only want to disable the input cache for checkboxes, but not for textfields. I completely agree with you, that this is a good feature of firefox, but not for custom two state buttons, which are basically redesigned checkboxes. Another thing is, why use javascript, where you can simply use an html property to prevent this behavior? And yes, I know, "autocomplete=off" makes the html code invalid, but the page still works. – Lajos Mészáros Jul 14 '14 at 08:51
3

"its a nice feature of Firefox": if you click on filtering checkboxes on a search result page and then reload it, the checked filters make no sense with the dataset displayed. -i say this is a major PITA as previously stated. – Sharky Aug 05 '14 at 08:22
I wouldn't ever call this a nice feature... yes, it does help when you're typing a lot of text and then need to refresh the page, but if you're developing a UI, it' far from a nice feature. – userfuser May 22 '15 at 11:57

score 0 · Answer 6 · answered Nov 19 '08 at 12:47

0

or instead of f5 press enter on address bar :)

answered Nov 19 '08 at 12:47

Ionuț Staicu

21,360
11
51
58

2

Or suggest to the user to do that, rather (this is a developer's question). – Mr. TA Aug 26 '13 at 10:35
We cannot really expect the users to always refresh the page with Crtl+Shift+R, don't we? – Lajos Mészáros Jul 09 '14 at 10:56

score 0 · Answer 7 · answered Nov 19 '08 at 13:54

0

It could be due to a browser caching - very useful for static web sites that are not changed too often, very bad for dynamic web applications.
Try with those two meta tags in the head section of the page. Second meta tag is for older browsers (IE5) that are not recognizing "no-cache" meta tag and although different produces the same result: Each request goes to the server.

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="-1">

answered Nov 19 '08 at 13:54

Aleksandar

1,341
1
12
17

Do we really care for such old browsers, like IE5? By the way, sending the headers with PHP seems a bit better, because you use less meta tags in the – Lajos Mészáros Jul 09 '14 at 10:58
3

His answer was in 2008, @MészárosLajos comment was in 2014. At that time, yes, it did matter. – Duniyadnd Jun 15 '15 at 11:28

score 0 · Answer 8 · answered May 15 '17 at 07:25

0

$("#showimage").prop("checked",false);

answered May 15 '17 at 07:25

Sumit Mehta

39
1
7

score 0 · Answer 9 · edited Sep 07 '17 at 03:14

0

the public idea to solve that

make form & reset button

<form>
<checkbox>
<reset>
</form>

$(reset).trigger("click");//to clear the cache and input 
$(checkbox).trigger("click");//to mark checkbox

edited Sep 07 '17 at 03:14

Brandon Minnick

13,342
15
65
123

answered Sep 06 '17 at 20:59

Mohamed Gomah

11
1

Why does the checkbox stay checked when reloading the page?

9 Answers9

Linked

Related