CODEWITHSUNDEEP
htmlfirefox
DoubleM
DoubleM

Reputation: 464

Can only select one radio button on Firefox

I am trying to design a web form where I run into a strange issue.

I set 3 radio buttons, but I can select only the first one no matter what radio button I click. I tried to open the HTML page on different browsers other than Firefox and it was okay. I also tried another web form that has a radio buttons with Firefox and it was okay. I could not figure out what why Firefox cant select the other radio buttons in from my form HTML page.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>m</title></head><body>
<from method="post" action="self">
<label> <span>Gender :</span>
<br>
<input name="gender" value="1" type="radio">Male
<br>
<input name="gender" value="2" type="radio">Female
<br>
<input name="gender" value="3" type="radio">N/A
<br>
</label>
</from>
</body></html>

Upvotes: 1

Views: 542

Answers (2)

xdhmoore
xdhmoore

Reputation: 9925

As @K K said, it's caused by multiple inputs inside a label tag.

We had a similar issue. I think what happens here is the event triggers at one of the <input>s, and then bubbles up to the parent <label>. Labels are bound to an input inside them, and I guess multiple inputs cause it to default to the first one. So it triggers an event on whatever one you click, then bubbles to the parent <label> and triggers again there, which is bound to the first input. Our case was with checkbox inputs, and it would set both boxes when the second one was checked. In Firefox. Not sure why Chrome behaves differently.

Example with checkboxes: http://codepen.io/anon/pen/IjboB

Upvotes: 0

K K
K K

Reputation: 18109

Don't use multiple inputs inside label. I think in this case it will select only the first input on matter where you click on label.

<form method="post" action="self"> <span>Gender :</span>
<br>
<input name="gender" value="1" type="radio"/>Male
<br>
<input name="gender" value="2" type="radio"/>Female
<br>
<input name="gender" value="3" type="radio"/>N/A
<br>
</form>

Upvotes: 3

Related Questions