Reputation: 2140
I am trying to force a user to select a radio option on a page, but when the user checks the 'No' option, my .checked value is coming up false
.
var long = document.getElementById('long');
if(long.checked == false){
message += '- Please select your stance\\r\\n';
errors = true;
}
<input name='long' id='long' type='radio' value='Yes' >Yes
<input name='long' id='long' type='radio' value='No' >No
Upvotes: 0
Views: 2403
Reputation: 790
You have the same id for both radio buttons, the names need to stay the same but they must have different ids
Try this:
var longYes = document.getElementById('longYes');
var longNo = document.getElementById('longNo');
if(longYes.checked == false && longNo.checked == false){
message += '- Please select your stance\\r\\n';
errors = true;
}
<input name='long' id='longYes' type='radio' value='Yes' >Yes
<input name='long' id='longNo' type='radio' value='No' >No
Upvotes: 0
Reputation: 35803
Both radio buttons have the same ID so it is only getting the first one from the getElementById call.
Change your code to use document.getElementsByName("long")
then loop over and check each one:
var long = document.getElementsByName('long'), message = "";
var checked = false;
for (var i = 0; i < long.length; i++) {
if (long[i].checked) {
checked = true;
}
}
if(!checked){
message += '- Please select your stance\\r\\n';
alert(message);
}
With none checked - http://jsfiddle.net/myFhm/ With no checked - http://jsfiddle.net/myFhm/1/
Upvotes: 0
Reputation: 28699
You can't have two checkboxes with the same ID property. Give them each a different ID and it should work properly.
var long = document.getElementById('longNo');
if(long.checked == false){
message += '- Please select your stance\\r\\n';
errors = true;
}
<input name='long' id='longYes' type='radio' value='Yes' >Yes
<input name='long' id='longNo' type='radio' value='No' >No
Upvotes: 1
Reputation: 114447
IDs must be unique, according to the HTML spec, therefore your code will not work as written.
If you look at it from a FORM approach, the radio buttons are an array:
var radios = document.form1.long
for(var x=0;x<radios.length;x++) {
alert(radios[x].value)
}
So you can check if YES is selected like this because YES is the first element in the array.
var radios = document.form1.long
if(radios[0].checked) { ... }
Upvotes: 1
Reputation: 414086
You can't give two elements the same "id" value. You could use .getElementsByName()
to find the set of radio buttons, and then look for the one that's checked, or give them two different "id" values (which is what I'd probably do).
<input name='long' id='long_yes' type='radio' value='Yes'>Yes
<input name='long' id='long_no' type='radio' value='No'>No
Upvotes: 1
Reputation: 38878
Both of your inputs have an id of "long", so getElementById is probably returning the first one, which is the "Yes" button.
Upvotes: 1