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.