...

View Full Version : Dynamically "checked" radio buttons?



rockdoc
08-11-2005, 04:50 PM
Hello,
Is it possible to dynamically select a radio button based on its value?

I want to load a variable e.g. $data{variable} into a javascript that would dynamically "check" the correct radio button

if variable = green, then the green radio button would be checked etc etc.

<form>
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">
<input type="radio" name="color" value="green"> <-dynamically checked
<input type="radio" name="color" value="yellow">
<form>

Thanks

Kor
08-11-2005, 05:01 PM
try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function checkV(f,v){
var c = f.elements['color'];
for(var i=0;i<c.length;i++){
c[i].checked=(c[i].value==v)?true:false;
}
}
</script>
</head>
<body>
<form>
insert a color (red, blue, green or yellow)<input type="text" onkeyup="checkV(this.form,this.value)"><br>
<input type="radio" name="color" value="red">red<br>
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="green">green<br>
<input type="radio" name="color" value="yellow">yellow
</form>
</body>
</html>

vwphillips
08-11-2005, 05:04 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function NoAgain(col){
ips=document.getElementsByTagName('INPUT');
for (i=0;i<ips.length;i++){
if (ips[i].type=='radio'&&ips[i].value==col){
ips[i].checked=true;
}
}
}

//-->
</script>
</head>

<body onload="NoAgain('green');" >
<form>
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">
<input type="radio" name="color" value="green"> <-dynamically checked
<input type="radio" name="color" value="yellow">
<form>
</body>

</html>

rockdoc
08-13-2005, 01:41 AM
Thanks guys,
I ended up using vwphillips code. Much appreciated :)

rockdoc
11-25-2005, 01:08 PM
I've been sucessfully using vwphillips code for a few months now.

Only problem is that my radio list has become too large, and I need to convert to a drop-down list.

So I need to convert the script to dynamically select a value from the drop down list (e.g. green).

<form>
<select name="colors">
<option value="red">Red
<option value="blue">Blue
<option value="green">Green <--dynamically selected
<option value="yellow">Yellow
</select>
</form>

Any help would be much appreciated.

vwphillips
11-25-2005, 09:34 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function NoAgain(col){
sel=document.getElementsByTagName('SELECT');
for (i=0;i<sel.length;i++){
for (i1=0;i1<sel[i].options.length;i1++){
if (sel[i].options[i1].value==col){
sel[i].selectedIndex=i1;
}
}
}
}

//-->
</script>
</head>

<body onload="NoAgain('green');" >
<form>
<select name="colors">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green <--dynamically selected</option>
<option value="yellow">Yellow</option>
</select>
</form>

</body>

</html>

rockdoc
11-26-2005, 12:16 AM
Thanks again vwphillips. :thumbsup:
Your help has really been appreciated. The code worked perfectly! :) :) :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum