Entry
onclick chained radios to populate chained selects & enable other forms
Apr 8th, 2008 17:58
ha mo, Vicki Wilder,
How do I populate a set of chained select dropdowns using a set of
chained radio buttons and initialize multiple client-side .js files
after the radios are picked?
How do I use those same radios to enable other forms (default
disabled) on same page?
I did have the .js file in one large list with no radios to pick. I
could do body onload then. I found out I needed to break the list up
into 16 smaller and more intelligent pieces. Now I can’t body onload
anymore because there’s no place for them to go until the radios are
picked. I’m thinking onclick on the red & blue radios or a “go”
button after. I also want to use onclick on the b, c, 1, & 2 radios
for enabling the choicesbb, cc, 11, & 22 forms (default disabled) on
the same page. I had previously used a script for putting these on
invisible layers, but it makes the forms “either/or” and uses even
more buttons. I really want this page to be “idiot-proof” by having
all disabled and letting the radio clicks take the guess work out of
the rest of the page. Any help GREATLY appreciated!!
Here's my page:
<html>
<head>
<script language="javascript" src="chainedselects.js"></script>
<script language="javascript" src="a1red.js"></script>
<script language="javascript" src="a2red.js"></script>
<script language="javascript" src="a1blue.js"></script>
<script language="javascript" src="a2blue.js"></script>
<script language="javascript" src="b1red.js"></script>
<script language="javascript" src="b2red.js"></script>
<script language="javascript" src="b1blue.js"></script>
<script language="javascript" src="b2blue.js"></script>
<script language="javascript" src="c1red.js"></script>
<script language="javascript" src="c2red.js"></script>
<script language="javascript" src="c1blue.js"></script>
<script language="javascript" src="c2blue.js"></script>
<script language="javascript" src="d1red.js"></script>
<script language="javascript" src="d2red.js"></script>
<script language="javascript" src="d1blue.js"></script>
<script language="javascript" src="d2blue.js"></script>
<script language="JavaScript">
function myRadioValue(what)
{
for (var i=0; i<3; i++)
{
if (what.one[i].checked == true)
var one = what.one[i].value;
if (what.two[i].checked == true)
var two = what.two[i].value;
if (what.three[i].checked == true)
var three = what.three[i].value;
}
myRadioValue = one + two + three;
}
//--></script>
</head>
<body>
<body onload="initListGroup('a1red', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('a2red', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('a1blue', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('a2blue', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('b1red', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('b2red', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('b1blue', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('b2blue', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('c1red', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('c2red', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('c1blue', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('c2blue', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('d1red', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('d2red', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('d1blue', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<body onload="initListGroup('d2blue', document.forms[0].select1,
document.forms[0].select2, document.forms[0].select3, document.forms
[0].select4)">
<form name=myRadioValue>
a: <input type="radio" name="one" value="a">
b: <input type="radio" name="one" value="b" onclick=“ “>
c: <input type="radio" name="one" value="c" onclick =“ “>
d: <input type="radio" name="one" value="d">
<br>
1: <input type="radio" name="two" value="1" onclick=“ “>
2: <input type="radio" name="two" value="2" onclick=“ “>
<br>
red: <input type="radio" name="three" value="red" onclick=“ “>
blue: <input type="radio" name="three" value="blue" onclick=“ “>
</form>
<form name=myChoices>
<select name="select1"></select>
<br>
<select name="select2"></select>
<br>
<select name="select3"></select>
<br>
<select name="select4"></select>
</form>
<p>
<form name="choicesbb">
<select name="selectbb" disabled>
<option>option1
<option>option2
</select>
</form>
<br>
<form name="choicescc">
<select name="selectcc" disabled>
<option>option1
<option>option2
</select>
</form>
<br>
<form name="choices11">
<select name="select11" disabled>
<option>option1
<option>option2
</select>
</form>
<br>
<form name="choices22">
<select name="select22" disabled>
<option>option1
<option>option2
</select>
</form>
<br>
</body>
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com
