CODEWITHSUNDEEP
htmlradio-button
Christophe
Christophe

Reputation: 28114

Radio buttons not switching on click, why?

I have the following form, where users can choose to enter either the ID or the name:

<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName"></label>

When I click on "Member ID or Last Name, this switches the radio buttons. However when I click on the text inputs, this has no effect on the radio buttons.

Is this the expected behavior? If so, is there any way to tweak the html to make it work?

Note: this is not a JavaScript question.

Fiddle: https://jsfiddle.net/3by5wqzw/

Upvotes: 0

Views: 3057

Answers (3)

Christophe
Christophe

Reputation: 28114

I think I found the answer.

The w3 recommendation states:

In an HTML document, an element must receive focus from the user in order to become active and perform its tasks

The issue is that when the user clicks on the text input, the radio button loses focus and is not activated.

Source (html4): http://www.w3.org/TR/html4/interact/forms.html#focus

Upvotes: 0

Stubborn
Stubborn

Reputation: 968

Yes, this seems to be the expected behaviour on chrome, microsoft edge and firefox on windows 10 and on chrome for android lollipop. You can use a bit of javascript to solve the problem:

<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="document.getElementById('ID').checked = true;"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="document.getElementById('Name').checked = true;"></label>

When you click on a text input, the client will automatically check the matching radio button looking it up by its id.

As an alternative, you could put the Javascript code in a function, so it looks better and is easier to edit if you have lots of radio buttons with text input associated with it:

function check_radio(element_id){
  document.getElementById(element_id).checked = true;
}
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="check_radio('ID');"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="check_radio('Name');"></label>

Upvotes: 1

ergonaut
ergonaut

Reputation: 7057

In regular html, radio input types are not related to anything other than the label associated with it. Therefore any other input text fields before or after need to be hooked up via some sort of javascript.

Upvotes: 0

Related Questions