PDA

Click to See Complete Forum and Search --> : almost there with dependent dropdowns

LuigiX
04-03-2004, 09:58 PM
Hi

I've been battling with three dependent dropdowns inserted into two forms. The forms are opened from option buttons. The dropdowns are populated from the same arrays.

Both forms work as intended but when I try to email them, the first form (form1) behaves itself by sending the text displayed in the dropdowns but for some reason form 2 will only send the array values, not the text. For some reason form2 does not appear to be calling the setValues() function.

Any help would be really appreciated.

Cheers

Luigi


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<script language="JavaScript" type="text/javascript">
<!--
var theform;
function setCurrent(frmName){
if((theform=getVisibleForm())==null){
theform = document.getElementById(frmName);
theform.style.visibility = "visible";
}else{
theform.style.visibility = "hidden";
//reset form and hide select #2 and #3
theform.reset();
theform.secondChoice.style.visibility = "hidden";
theform.thirdChoice.style.visibility = "hidden";

theform = document.getElementById(frmName);
theform.style.visibility = "visible";
}
}
function getVisibleForm(){
var frms = document.getElementsByTagName("form");
for(var n=0;n<frms.length;n++){
if(frms[n].style!=null && frms[n].style.visibility=="visible"){
return frms[n];
}
}
return null;
}
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[4] = "Truck";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Train";
arrItemsGrp1[5] = 1;
arrItems1[6] = "Car";
arrItemsGrp1[6] = 1;
arrItems1[7] = "Boat";
arrItemsGrp1[7] = 2;
arrItems1[8] = "Submarine";
arrItemsGrp1[8] = 2;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[9] = "F-150";
arrItemsGrp2[9] = 4
arrItems2[10] = "Tahoe";
arrItemsGrp2[10] = 4
arrItems2[11] = "Freight Train";
arrItemsGrp2[11] = 5
arrItems2[12] = "Passenger Train";
arrItemsGrp2[12] = 5
arrItems2[13] = "Chevy Malibu";
arrItemsGrp2[13] = 6
arrItems2[14] = "Lincoln LS";
arrItemsGrp2[14] = 6
arrItems2[15] = "BMW Z3";
arrItemsGrp2[15] = 6
arrItems2[16] = "Oil Tanker";
arrItemsGrp2[16] = 7
arrItems2[17] = "Fishing Boat";
arrItemsGrp2[17] = 7
arrItems2[18] = "Los Angelas Class";
arrItemsGrp2[18] = 8
arrItems2[19] = "Kilo Class";
arrItemsGrp2[19] = 8

function selectChange(control, controlToPopulate, ItemArray, GroupArray, hideLast)
{
var count=0;
var myEle ;
var x ;
// Empty the second or third drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q] = null;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
if(control.selectedIndex != 0){
controlToPopulate.style.visibility="visible";
for ( x = 0 ;x < ItemArray.length;x++ )
{
if(x==0){
// ADD Default Choice - in case there are no values
controlToPopulate.options[0] = new Option("[SELECT]",0);
}
else if ( GroupArray[x] == control.value)
{
count++
controlToPopulate.options[count] = new Option(ItemArray[x],x);
}
}
}
//hide next select if first option selected
if(control.selectedIndex == 0){
controlToPopulate.style.visibility="hidden";
}
//hide third select if first option in first select selected
if (control.name == "firstChoice") {
hideLast.style.visibility="hidden";
}
}
//-->
function setValues(){
d = document.getElementsByTagName('select');
for(var i=0;i<d.length;i++){
d[i].options[d[i].selectedIndex].value = d[i].options[d[i].selectedIndex].text;
}
return true;
}
</script>
</head>
<body>
<table id="AutoNumber1" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="99" cellSpacing="0" cellPadding="0" width="400" border="0">
<tr>
<td height="33"><b>Select from one of the following options:</b></td>
</tr>
<tr>
<td height="21">
<input type="radio" name="form_type" value="optionA" onclick="setCurrent(this.value);">Option A</td>
</tr>
<tr>
<td height="21">
<input type="radio" name="form_type" value="optionB" onclick="setCurrent(this.value);">Option B</td>
</tr>
</table>

<form id=optionA style="position: absolute;top: 150;left: 3;visibility:hidden;" method="POST" action="--WEBBOT-SELF--" name="form1" onSubmit="return setValues()">
Form 1
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, this.form.secondChoice, arrItems1, arrItemsGrp1, this.form.thirdChoice);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, this.form.thirdChoice, arrItems2, arrItemsGrp2);" style="visibility: hidden">
</SELECT> <SELECT id=thirdChoice name=thirdChoice style="visibility: hidden">
</SELECT>
</TD>
</TR>
</TABLE>
<p><input type="submit" value="Submit" name="Form_Sent"><input type="reset" value="Reset" name="B2"></p>
</form>
<form id=optionB style="position: absolute;top: 260;left: 3;visibility:hidden;" method="POST" action="--WEBBOT-SELF--" name="form2" onSubmit="return setValues()">
Form 2
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, this.form.secondChoice, arrItems1, arrItemsGrp1, this.form.thirdChoice);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, this.form.thirdChoice, arrItems2, arrItemsGrp2);" style="visibility: hidden">
</SELECT> <SELECT id=thirdChoice name=thirdChoice style="visibility: hidden">
</SELECT>
</TD>
</TR>
</TABLE>
<p><input type="submit" value="Submit" name="Form_Sent"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>
Khalid Ali
04-04-2004, 12:18 PM
First of all..why are you using two forms on the same page(not that its wrong but there has to be a compelling reason for this)

Unless you don't need 2 forms put both list boxes in the single form and it should solve your problem.
LuigiX
04-04-2004, 01:27 PM
Hi Khalid

The two form approach is the best way to solve the practical application of this problem.

The web page is for staff movements. The option buttons represent two types of staff movements - new employees and transferring employees - which make a form visible depending on the option selected. The fields on each form are quite different except for these three dropdowns, which are common to each form.

This is why I am using two forms on one page with a show/hide approach. The user opens the form on the page that they want to work with.

This approach has been working well on our company Intranet until now - when it has become necessary to make a third dropdown dependent on the second.

I must use Frontpage Extensions for form mail.

Any help you can give me is really appreciated.

Cheers

Luigi
Owl
04-04-2004, 04:48 PM
Hi Luigi,function setValues(){
d = document.getElementsByTagName('select');
for(var i=0;i<d.length;i++)
if(d[i].length)
d[i].options[d[i].selectedIndex].value = d[i].options[d[i].selectedIndex].text;
return true;
}
( •) (• )
>>V<<
LuigiX
04-04-2004, 05:00 PM
Owl

I'm eternally grateful!!

Can you explain why it worked okay with the first form but not the second until the pesky "if" is added


Thanks again

Cheers

Luigi