dependent form fields

[gabbagabba]

Dependent form fields
This is what I am trying to do, and I have scoured all my usual resources to find an answer to no avail.
I have a FORM on a basic HTML page. This forms needs to have one dropdown (dropdown B) within it changed depending on what type of input the user selects in dropdown A.
So if user selects Option A in dropdown A, dropdown B in populated with one set of options.
If they Select Option B in dropdown A, dropdown B in populated with another set of unique options.

I have built all 5 Dropdown B's

All other form fields should remain "as is". I don't want to construct 5 unique forms to do this. I think it is Form Manager .js
I have found a script which does what I want (with modification) but it is actually a FORM unto itself, AND as I understand it you cannot have nested forms on a webpage.

Can I place this form outside the main form to be submitted and still be able to access the input for the form to be submitted?


So basically a user has 5 options in form dropdown A, and depending on which one of those 5 they choose they get a new set of options in from dropdown B.

There is no SQL or databases involved in this.

am I making sense? IS there a solution I am missing?

[vwphillips]

<script type="text/javascript">

// for unlimited linked select lists

// all array names must start with zxc + the option text less any spaces or special charactors
var zxctom=[];
//       text    value
zxctom[0]=['tom 1','tom 1'];
zxctom[1]=['tom 2','tom 2'];
zxctom[2]=['tom 3','tom 3'];

var zxctom1=[];
zxctom1[0]=['tom 1 1','tom 1 1'];
zxctom1[1]=['tom 1 2','tom 1 2'];

var zxctom2=[];
zxctom2[0]=['tom 2 1','tom 2 1'];
zxctom2[1]=['tom 2 2','tom 2 2'];

var zxctom3=[];
zxctom3[0]=['tom 3 1','tom 3 1'];
zxctom3[1]=['tom 3 2','tom 3 2'];

var zxcdick=[];
zxcdick[0]=['**** 1','**** 1'];
zxcdick[1]=['**** 2','**** 2'];
zxcdick[2]=['**** 3','**** 3'];

var zxcdick1=[];
zxcdick1[0]=['**** 1 1','**** 1 1'];
zxcdick1[1]=['**** 1 2','**** 1 2'];

var zxcdick2=[];
zxcdick2[0]=['**** 2 1','**** 2 1'];
zxcdick2[2]=['**** 2 2','**** 2 2'];

var zxcharry=[];
zxcharry[0]=['harry 1','harry 1'];
zxcharry[1]=['harry 2','harry 2'];
zxcharry[2]=['harry 3','harry 3'];

var zxcharry1=[];
zxcharry1[0]=['harry 1 1','harry 1 1'];
zxcharry1[1]=['harry 1 2','harry 1 2'];

var zxcharry2=[];
zxcharry2[0]=['harry 2 1','harry 2 1'];
zxcharry2[2]=['harry 2 2','harry 2 2'];

var LinkedAry=[];

function Populate(s,t){
 t=document.getElementById(t);
 var ary=window['zxc'+s.options[s.selectedIndex].text.replace(/[\s\W]/g,'')]||[];
 if (!t.set){
  t.set=true;
  t.srt=t.options.length;
  LinkedAry.push(t);
 }
 for (var z0=0;z0<LinkedAry.length;z0++){
  if (LinkedAry[z0]==t){
   for (var z0a=z0;z0a<LinkedAry.length;z0a++){
    LinkedAry[z0a].options.length=LinkedAry[z0a].srt
   }
  }
 }
 for (var z1=0;z1<ary.length;z1++){
  t.options[z1+t.srt]=new Option(ary[z1][0],ary[z1][1]||'',true,true);
 }
 t.selectedIndex=0;
}

</script>

<select id="s1" size="1" onchange="Populate(this,'s2');" >
<option value="select">Select</option>
<option value="tom">tom</option>
<option value="****">****</option>
<option value="harry">harry</option>
</select>
<select id="s2" size="1" onchange="Populate(this,'s3');">
<option value="select">Select</option>
</select>
<select id="s3" size="1">
<option value="select">Select</option>
</select>

[gabbagabba]

OK, I am diving in - many thanks for the insight!