PDA

View Full Version : 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
<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:


<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:


<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:


<!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:


<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:


<!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:

<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. :eek: hoho

jscheuer1
01-23-2009, 11:18 AM
My code uses the document.forms method.

smansakra
02-06-2009, 09:49 AM
<!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

jscheuer1
02-06-2009, 10:00 AM
For that to work you must change the code a little so that it is accessing the form:


<!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 = document.forms[f].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>

smansakra
02-06-2009, 10:06 AM
aha! it works,

by the way you use f = document.forms[f].elements; , hum, what is different with f = f.form.elements; ?

sorry, i'm still new...

jscheuer1
02-06-2009, 10:23 AM
It's just a matter of using the proper syntax for the type of argument you are passing to getPoBox().

With zoo(), you are passing it a string ('form_a'). A string is not a form or a form element. The original syntax:


f = f.form.elements;

expects a form's element as the argument, converting it into it's parent form's element nodeList. In plain language we are doing:

OK, we have the input button. What's the list of all of the elements in the form that this input button is a member of?

When you feed it a string that is the name of the form itself, we use:


f = document.forms[f].elements;

to convert the string value into the named form's element nodeList. In plain language:

OK, we have the name of the form. What's the list of all of the elements in the form that has that name?

smansakra
02-06-2009, 10:38 AM
well thanks this is better than w3schools.com :)

bgqueengeek
11-09-2011, 01:04 AM
The suggestion about setting radio buttons based on a variable value was just what I needed to set radio buttons in a confirmation page based on what choices the user had made. Thanks for your patience, jscheuer1.