Upon refresh Firefox automatically checks the following checkbox instead of the one that the user checked or JavaScript programmatically checked when form field elements are dynamically added by JavaScript
I have a form that contains some checkboxes. If my JavaScript programmatically adds other form fields before the checkboxes, a refresh of the browser will result in the checkbox after any that the user or my JavaScript code checked instead of the actual ones that were checked. This happens whether the user is using Mac OS X or Windows, and it seems to happen in all versions of Firefox as far back as 3.6 (I'm testing with 3.6, 4 and 5).
I realize that Firefox caches values of form fields for page refreshes. If I had to guess I would say that maybe Firefox remembers these by some sort of index within the context of the form and the dynamically added form field elements are interfering with this.
I did some searches on Google for solutions, but so far the suggestions have amounted to blocking autocomplete which seems a bit overreaching to me. Does anyone know if this issue will be fixed or if there's even any desire on Mozilla's part to fix it? Is there some "proper" way to resolve this problem?
Thank you!
All Replies (1)
Follow-up:
One of my colleagues is working on a product feature that involves checkboxes (this is how I came across this issue in the first place). His checkboxes aren't contained within a form element whereas in my test page I described in my question when I removed the form from the page the issue didn't manifest.
However, the page he's working on does contain other forms so I decided to modify my test page to try to replicate this scenario. I found some really odd behavior.
If I have a form on a page but the checkboxes are not children of that form, and if I dynamically add a single INPUT element or a single TEXTAREA input, the checked values just disappear on page refresh. That's expected since the lack of a parent form should eliminate the memory of the checkbox values, right?
Well, when I dynamically add both an INPUT element and a TEXTAREA element it goes right back to remembering and moving the checked value, but only by one step. By comparison, if the checkboxes and the dynamically added form fields are contained with a form the checked value will move by a number of steps equal to the number of dynamically added form fields.
Strange, strange behavior I can't really decode with certainty across the entire range of possible scenarios...