radio button is not checked on page refresh in firefox

Question

<div id="btns">
   <input id="r01" type="radio" name="music" checked>
   <input id="r02" type="radio" name="music">
   <input id="r03" type="radio" name="music">
   <input id="r04" type="radio" name="music">
   <input id="r05" type="radio" name="music">
</div>

Firefox 24 - r1 is not checked on page refresh. On Shift-F5 - works.
Chrome - works.

Electrotechnology

try <input id="r01" type="radio" name="music" checked="checked"> – Gyneco

also, shouldn't the radio buttons has values ? – Gyneco

@HasanAboShally, checked='checked' doesn't work. I don't need values, just for click event. – Electrotechnology

It's weird, i know firefox had an issue with radio-buttons, but that was long time ago.. if you only need the click event, then why not using normal buttons ? – Gyneco

@HasanAboShally, design reasons. – Electrotechnology

i would have used css :) – Gyneco

I believe that html element should be chosen based on their 'meaning' and not how do they look like.. Semantic Web ;) – Gyneco

@HasanAboShally, the same problem would exist if I have value. It's not my question about using or not, but why the radio doesn't work if I use it ? – Electrotechnology

it ma be a FireFox issue (again..) – Gyneco

Answer 1

If it works on shift-F5 it just means, firefox saves the user-input because the form was not sent yet. Firefox keeps form data on reload

Just found a solution!

Just add autocomplete="off" to all you input and you will solve the problem.

jQuery to solve this on all inputs and textareas

$('input,textarea').attr('autocomplete', 'off');

Determinism

Answer 2

It's a Firefox issue for a long time now.

Set the checked property with javascript when the page loads:

window.onload=check;
function check() {
  document.getElementById("r01").checked = true;
}

Pozzy