Form interaction

Forum Moderators: open

Message Too Old, No Replies

Form interaction

how to get a form to change pending input

Blelisa

2:21 pm on Apr 21, 2005 (gmt 0)

Hello,
I am trying to figure out how to make a form so that a person goes to a drop down box, depending on what the user chooses, will allow another drop down box to become active. For example, the first drop down box is a field of types of equipment, then if they pick phones,than the drop box for the manufacturers of phones becomes active and the user can choose their desired manufactures, however the drop down box for the television manufacturers is greyed out and unable to be accessed.
I hope I made this understandable. Any help will be greatly appreciated.

ajkimoto

9:37 pm on Apr 21, 2005 (gmt 0)

Hi Blelisa,

How about something like this? Instead of greying out the second select, just swap out the html based on the choice in the first select:

<!--
//here we set up the array to handle the subselects
var subArray=new Array(4)
//each element of subArray after the first contains an array of select options
subArray[0]=''
subArray[1]=new Array('Pangolin','Anteater','Echidna')
subArray[2]=new Array('Carp','Anchovy','Salmon','Halibut')
subArray[3]=new Array('Alligator','Iguana','Turtle','Rattlesnake','Gila Monster')

//this function builds the subselect object HTML and writes it to div2
function setSub(obj){
var subRow=obj.selectedIndex
//if choice is other than default option
if (subRow>0){
var subSelect='<select id="sel2"><option value="">Choose Animal Subtype</option>'
for (i=0;i<subArray[subRow].length;i++){
subSelect=subSelect+'<option value="'+subArray[subRow][i]+'">'+subArray[subRow][i]+'</option>'
}
subSelect=subSelect+'</select>'
//if choice is default option
}else{
subSelect=''
}
document.getElementById('div2').innerHTML=subSelect
}
//-->
</script>

</style>

</head>

<body>
<div id="div1">
<select id="sel1" onchange="setSub(this)">
<option value="">Choose Animal Type</option>
<option value="Mammal">Mammal</option>
<option value="Fish">Fish</option>
<option value="Reptile">Reptile</option>
</select>
</div>
<div id="div2"></div>
</body>

</html>

Hope this helps,

ajkimoto