How to select a radio button using javascript?

**rishirich4y** · 05-31-2008, 03:49 PM

Hi,

I have 2 radio buttons as shown below:

<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes

I want to select one of this radio button, according to the following condition in javascript:

<script type="text/javascript">
if (<%=option1%> != ""){
// Radiobutton "No" should be selected.
}
else if (<%=option2%> != ""){
// Radiobutton "Yes" should be selected.
}
</script>

How can I do this in Javascript? Any help will be highly appreciated.

Thanks,
Rishi

**jscheuer1** · 05-31-2008, 04:07 PM

Originally Posted by rishirich4y

Code:

<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
<input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes

It is against the specification to have more than one element per page with the same id.

You haven't shown the full page structure. If you were to do so, there might be a way to access these buttons as a part of the document.forms collection - almost always preferable when dealing with form elements.

But, even with what you have shown, if you were to use:

Code:

<input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
<input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes

You could:

Code:

<input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
<input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes
<script type="text/javascript" defer="defer">
<!-- 
if(document.getElementById){
if (<%=option1%> != ""){
// Radiobutton "No" should be selected.
document.getElementById('poBoxRadioYes').checked = false;
document.getElementById('poBoxRadioNo').checked = true;
}
else if (<%=option2%> != ""){
// Radiobutton "Yes" should be selected.
document.getElementById('poBoxRadioNo').checked = false;
document.getElementById('poBoxRadioYes').checked = true;
}
}
// -->
</script>

**rishirich4y** · 05-31-2008, 04:57 PM

This seems to work only when I add it as part of a function to be executed when a submit button is clicked. But I want it to select the radio button as soon as the page is loaded.

Thanks,
Rishi

**jscheuer1** · 05-31-2008, 05:05 PM

Works onload here:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var a='', b='d';
</script>
</head>
<body>
<div>
<input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No"> No
<input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes"> Yes
</div>
<script type="text/javascript" defer="defer">
<!-- 
if(document.getElementById){
if (a != ""){
// Radiobutton "No" should be selected.
document.getElementById('poBoxRadioYes').checked = false;
document.getElementById('poBoxRadioNo').checked = true;
}
else if (b != ""){
// Radiobutton "Yes" should be selected.
document.getElementById('poBoxRadioNo').checked = false;
document.getElementById('poBoxRadioYes').checked = true;
}
}
// -->
</script>
</body>
</html>

**rishirich4y** · 05-31-2008, 06:58 PM

Thanks a ton dude...It works!

**smansakra** · 01-22-2009, 10:21 AM

and what about if not using document.getElementById, but using document.form_name.buttonName.value?

looks:

Code:

<form name="form_a">
<input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No"> No
<input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes"> Yes


<input type="button" value="try" onclick="alert(document.poBoxRadio.value);">
</form>


it should return the value of "yes" or "no" if we check one of it, but it always return "undefined", can anyone help?

**jscheuer1** · 01-22-2009, 12:49 PM

In your example you aren't even doing document.formname.name.value (which should really be document.formname.elements.name.value), but even if you were, in javascript that's equivalent to getElementById insofar as the element's selector that you are seeking must be unique. You could do it this way though:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getPoBox(f, n){
 f = f.form.elements;
 for (var i = f.length - 1; i > -1; --i)
  if(f[i].name == n && f[i].checked)
   return f[i].value;
 return 'undefined';
}
</script>
</head>
<body>
<form name="form_a">
<input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No"> No
<input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes"> Yes


<input type="button" value="try" onclick="alert(getPoBox(this, 'poBoxRadio'));">
</form>
</body>
</html>

because then we are no longer looking for a single element.

**smansakra** · 01-23-2009, 10:01 AM

hum, yes, we can do it by getelementbyid, but is it possible to get it by using document.form_name.buttonName.value?

look:

Code:

<form name="form_a">
<input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No"> No
<input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes"> Yes


<input type="button" value="try" onclick="alert(document.form_a.poBoxRadio.value);">
</form>

it always return undefined.

hoho

**jscheuer1** · 01-23-2009, 11:18 AM

My code uses the document.forms method.

**smansakra** · 02-06-2009, 09:49 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getPoBox(f, n){
 f = f.form.elements;
 for (var i = f.length - 1; i > -1; --i)
  if(f[i].name == n && f[i].checked)
   return f[i].value;
 return 'undefined';
}
function zoo(){
	alert(getPoBox('form_a', 'poBoxRadio'));

}
</script>
</head>
<body>
<form name="form_a">
<input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No"> No
<input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes"> Yes


<input type="button" value="try" onclick="zoo();">
</form>
</body>
</html>

i tried this code but doesnt work.... actually your code work, but i add function zoo on there and then it not work, what 's wrong? help