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.

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.
    – Kai Qing
    Nov 2, 2011 at 23:48
  • 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. Nov 2, 2011 at 23:54
  • 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.
    – Kai Qing
    Nov 3, 2011 at 0:02
  • 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. Nov 3, 2011 at 0:05
  • ... 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.
    – Kai Qing
    Nov 3, 2011 at 0:06

2 Answers 2

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).

2
  • 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.
    – toyNN
    Aug 6, 2013 at 23:10
  • 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.
    – RuHa
    Jun 29, 2018 at 16:06
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);

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.