Firefox remembering radio buttons incorrectly
Asked Answered
U

2

9

In Firefox 7.0.1, I have two checkboxes and a number of other inputs.

When I add another input via jQuery Firefox does not correctly remember what radio inputs are selected.

For instance, if I select the first radio button and then refresh the page the second radio button is selected rather than the first and if I refresh again no radio button is selected.

You should be able to copy and paste the code below into a new file to test for yourselves:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $('select').after('<input class="select" type="text" name="new_text_input" />');
});
    </script>
    <title>Pretty jQuery Form</title>
</head>
<body>
<form>
    <fieldset>
        <label>Select Box</label>
        <select name="my_select">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
        </select>
    </fieldset>
    <fieldset>
        <label>Text Input</label>
        <input class="text" id="text_input" name="input" type="text" />
    </fieldset>
    <fieldset>
        <label>Text Area</label>
        <textarea></textarea>
    </fieldset>
    <fieldset>
        <label>Radio</label>
        <input value="1" name="radio" id="radio1" type="radio" /> <label for="radio1">Radio 1</label>
        <input value="2" name="radio" id="radio2" type="radio" /> <label for="radio2">Radio 2</label>
    </fieldset>
</form>
</body>
</html>

I should note that what i'm actually trying to do is more complicated but after many hours of debugging i've managed to narrow it down to this.

Unpopular answered 2/11, 2011 at 23:44 Comment(5)
Do you mean after you submit the form or just refresh the page? I don't think any browser officially claims to remember user input if they simply refresh before filling a form out and submitting.Cleanshaven
I have a feeling that Firefox does, or at least used to. Nonetheless there is still a problem here with the way different radio buttons are being checked on each refresh.Unpopular
By officially I mean that given the malleability of DOM through JS the expected indices may not be present and it is left to interpretation. There's a possibility its so called memory was based on a basic numerical position in the dom and because of this unexpected insertion it is misapplying it. So for you, it might be necessary to go so far as to set a js cookie containing your expected form status and apply that in your document.ready call.Cleanshaven
That is a possibility although it seems a little excessive, I would have thought a "bug" such as this would be more widely known if it is simply a case of the browser using a very poor method to cache the checked status of radio buttons. Especially considering how prominent javascript based forms are these days.Unpopular
... so in other words, FF might try, but not officially claim it guarantees this will be perfect because of the above comment. You could save the state of your form on each element's blur.Cleanshaven
R
24

There is an article about this issue: http://www.ryancramer.com/journal/entries/radio_buttons_firefox/

The bug was first reported five years ago: https://bugzilla.mozilla.org/show_bug.cgi?id=394782

Solution:

<form autocomplete="off">

Or using jQuery:

$(document).ready(function() {
    if ($.browser.mozilla) $("form").attr("autocomplete", "off");   
}); 

It is also possible to prevent the problem by just putting autocomplete="off" on the radio buttons themselves (this way you can still get autocomplete for the other form fields).

Rubierubiginous answered 8/1, 2012 at 17:45 Comment(2)
I just ran into this issue with a group of radio buttons and Firefox selecting the first one even though the third radio button has 'checked' property. Chrome and IE correctly show the third button as selected. I added the suggested 'autocomplete="off"' to each of the radio buttons in the group and now Firefox correctly shows the third radio button selected.Strontian
This issue is still in the wild, though we only encountered it in Firefox on Mac OS (High Sierra specifically). On a PC running Windows 10, the checkbox issue didn't occur.Orthogenic
B
3

The radio input that should be checked keeps the attribute checked="checked", so looking for that input element and manually checking it fixed this problem for me:

$('input[type="radio"][checked="checked"]').prop('checked', true);

Buckden answered 28/7, 2015 at 15:24 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.