Why does Firefox + My code Destroys FireFox refresh

Question

I am soo angry right now. I lost hours and i dont know why this happens. Its a semi rant but i'll try to keep it short

1. My code would not work, even after refreshing it was broken
2. I fixed my code or so i thought because it stops working without me changing anything (you would think i am imagining this...)
3. I somehow decide to make a new window or tab i run my code and verifies it works.
4. I write more code and see everything is broken again
5. I write test in a new window and see my code does work
6. I see my code doesnt work and firebug DOES NOT HELP
7. I notice when i create a new tab everything works
8. I realize refreshing does not work and i MUST make a new tab for my code to work.

Then i knew instantly what the problem was. I modify a display:none textbox but i set the values incorrectly. I cant see it because it is hidden. Now some of you might say its my fault because when doing a refresh all of the data may be cache. But here is the kicker. I was using POST data. I posted in between of the refresh each and everytime.

Whats the point of using POST when the same data is cached and use anyways? If theres no chance for a search engine to follow a block user get link then why should i bother making anything post when security or repeat actions are not an issue? POST didnt seem to do anything.

Answer 1

Sounds like you're being hit by form-field-value-remembering.

When you use back and forward (but when the bfcache isn't used in browsers that have it), or in some browsers when you hit reload, the browser attempts to keep the values of each form field that were present when the page was last unloaded. This is a feature intended to allow the user to navigate and refresh forms without losing all the data they're laboriously typed into them.

So you can't rely on the value of a form field being the same at page load time as it appears it should be from the HTML source. If you have DOM state that depends on the value of a form field (such as for example a form where some of the fields are hidden or disabled depending on the value of another field), you must update that state at page load time to reflect the field values that the browser has silently dropped into place (no onchange events occur). And don't use hidden inputs to store scripting variables at all.

The exact behaviour varies across browsers. For example some browsers keep the values of hidden fields and some don't. Mozilla and WebKit put the new values in instantly as the fields are parsed into the DOM, whilst IE only does it on window.onload... and Opera, aggravatingly, does it just after window.onload, so you can only catch it by setting a 0-timeout to update state after onload. It's a nasty mess.