How can I dynamically change form elements? [Archive]

View Full Version : How can I dynamically change form elements?

John Albert

09-24-2007, 11:00 PM

OK Here's my dilemma:

I have a Web form with a pair of radio buttons that choose between 2 options. The choice made here will affect which elements will be displayed or activated in the next section of the form, like so:

Picking Option 1 will result in a 2nd series of radio buttons offering a single choice from among the values A, B, C, D, and E.

Picking Option 2 will only result in a choice between only options A and B.

So if the first radio button is chosen, then all 5 subsequent options must be available, but if the second is chosen all but the first 2 must either disappear or become "greyed out" and rendered inactive. Ideally, I would prefer the unnecessary radio buttons to just disappear when the 2nd option is checked.

I've been racking my brains trying to figure out how to make this work, but so far to no avail. Can anyone help?

Fang

09-25-2007, 09:23 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>radio buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
var aRadio=document.getElementsByName('first');
for(var i=0; i<aRadio.length; i++) {
aRadio[i].onclick=function(){secondSet(this);};
}
};

function secondSet(obj) {
if(document.getElementsByName('second')) {removeSecond();}
var parent=document.getElementsByTagName('fieldset')[0];
var txt=['A','B','C','D','E'];
var count=(obj.id=='opt1')? 5 : 2;
for(var i=0; i<count; i++) {
var label=document.createElement('label');
label.appendChild(document.createTextNode(txt[i]+':'));
var radio;
radio=document.createElement('input');
radio.setAttribute('type', 'radio');
radio.setAttribute('name', 'second');
label.appendChild(radio);
parent.appendChild(label);
}
}

function removeSecond() {
var parent=document.getElementsByTagName('fieldset')[0];
var offspring=document.getElementsByTagName('label');
for(var i=offspring.length-1; i>=2; i--) {
parent.removeChild(offspring[i]);
}
}
</script>

<style type="text/css">
label {display:block;}
</style>

</head>
<body>
<form action="#" name="form1">
<fieldset><legend>radio buttons</legend>
<label>option 1:<input type="radio" id="opt1" name="first"></label>
<label>option 2:<input type="radio" id="opt2" name="first"></label>
</fieldset>
</form>
</body>
</html>

John Albert

09-25-2007, 07:48 PM

Thanks Fang, this is a really big help!

John Albert

09-28-2007, 08:15 PM

OK one more thing. Is it possible to do the same thing, except with the 2nd tier of options being in a drop-down box instead of a second set of radio buttons?

The thing would work essentially the same: the choice between 2 radio buttons would decide which set of options would appear in the next section of the form.

The form would have 2 radio buttons with a drop-down box right next to them.

Choosing radio button 1 would result in a choice of 5 options when the drop-down box is activated; call them A,B,C,D and E.

Choosing radio button 2 would result in a more limited choice of only 2 options in the drop-down; A or B (a subset of the 5 options above).

I've tried modifying Fang's code (above) to allow for this, but it appears I don't have a complete enough understanding of the JavaScript DOM.