Menu
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.
340
Right-click any radio button to uncheck.
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
Always Offer a Default Selection One of the 10 heuristics of UI design says that users should be able to undo (and redo) their actions. This means enabling people to set a UI control back to its original state. In case of radio buttons this means that radio buttons should always have exactly one option pre-selected.
Radio buttons allow a user to select a single option among multiple options. You can set the Choice Value of each option, for each button, as well as group these buttons by giving them the same Group Name.
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).
39
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);
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
