Online Shopping : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

9 of 20 people (45%) answered Yes
Recently 5 of 10 people (50%) answered Yes

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