Hi
Essentially I want to drive the values in a second dropdown from the values in the first.
Then, based on the combination of the values selected in each of the dropdowns, I want to open a specific table.
eg a combination of "A" selected in the first will display "A1" and "A2" in the second dropdown. "A1" selected in the second dropdown will show "tableaa1" while "A2" in the second dropdown will show "tableaa2"
a combination of "B" selected in the first will display "B1" and "B2" in the second dropdown. "B1" selected in the second dropdown will show "tablebb1" while "A2" in the second dropdown will show "tablebb2"
Sounds simple??
On opening the form the tables must be hidden and only the correct one opens when the onchange event in the second dropdown fires
I have gone almost all the way with the attached code but the drpodown-combination thing is not happening
Any help is really appreciated
Cheers
Luigi
Here's the code...
[code]
<HTML><HEAD><TITLE>audit form</TITLE>
<SCRIPT language=JavaScript type=text/JavaScript>
function showTable(tableId) {
//first hide all the tables so that no tables are visible except one
document.getElementById("t
ableaa1").
style.disp
lay="none"
;
document.getElementById("t
ableaa2").
style.disp
lay="none"
;
document.getElementById("t
ablebb1").
style.disp
lay="none"
;
document.getElementById("t
ablebb2").
style.disp
lay="none"
;
document.getElementById(ta
bleId).sty
le.display
="block";
}
function showField()
{
var choice = document.auditform.audit.o
ptions[doc
ument.audi
tform.audi
t.selected
Index].val
ue;
if(choice == "a")
{
document.all['a1'].style.d
isplay = "";
document.all['a2'].style.d
isplay = "";
document.all['b1'].style.d
isplay = "none";
document.all['b2'].style.d
isplay = "none";
}
else if (choice == "b")
{
document.all['b1'].style.d
isplay = "";
document.all['b2'].style.d
isplay = "";
document.all['a1'].style.d
isplay = "none";
document.all['a2'].style.d
isplay = "none";
}
}
function hideTable(tableIda,tableId
b,tableIdc
,tableIdd)
{
var a = tableIda;
var b = tableIdb;
var c = tableIdc;
var d = tableIdd;
document.getElementById(a)
.style.dis
play="none
";
document.getElementById(b)
.style.dis
play="none
";
document.getElementById(c)
.style.dis
play="none
";
document.getElementById(d)
.style.dis
play="none
";
}
</SCRIPT>
</HEAD>
<BODY onload="hideTable('tableaa
1','tablea
a2','table
bb1','tabl
ebb2')">
<FORM id=auditform name=auditform action=/cgi/formmail method=post>
<p>Audit Type:
<SELECT onchange=showField() name=audit>
<OPTION value=choose selected>Select an Audit</OPTION>
<OPTION value=a>A</OPTION>
<OPTION value=b>B</OPTION>
</SELECT></p>
<p>Location:
<SELECT id=location onchange='showTable();' name=location>
<OPTION value=choose selected>Select a Location</OPTION>
<OPTION value=a1>A1</OPTION>
<OPTION value=a2>A2</OPTION>
<OPTION value=b1>B1</OPTION>
<OPTION value=b2>B2</OPTION>
</SELECT>
</p>
<TABLE id=tableaa1>
<TBODY>
<TR>
<TD>
<DIV align=center><strong>ab</s
trong></DI
V></TD></T
R>
<TR>
<TD>
<DIV align=right> </DIV></
TD>
</TR>
</TBODY>
</TABLE>
<TABLE id=tableaa2>
<TBODY>
<TR>
<TD>
<DIV align=center><strong>ab</s
trong></DI
V></TD></T
R>
<TR>
<TD>
<DIV align=right> </DIV></
TD>
</TR>
</TBODY></TABLE>
<TABLE id=tablebb1>
<TBODY>
<TR>
<TD>
<DIV align=center><strong>ab</s
trong></DI
V></TD></T
R>
<TR>
<TD>
<DIV align=right> </DIV></
TD>
</TR>
</TBODY></TABLE>
<TABLE id=tablebb2>
<TBODY>
<TR>
<TD>
<DIV align=center><strong>ab</s
trong></DI
V></TD></T
R>
<TR>
<TD>
<DIV align=right> </DIV></
TD>
</TR>
</TBODY></TABLE>
<TABLE>
<TBODY>
<TR>
<TD colSpan=2>
<DIV align=center></DIV></TD></
TR>
<TR>
<TD colSpan=2>
<DIV align=center></DIV></TD></
TR>
<TR>
<TD colSpan=2>
<DIV align=center><INPUT type=submit value="Submit Query" name=Submit> <INPUT id=Reset type=reset value=Reset name=Reset>
</DIV></TD></TR></TBODY></
TABLE>
</FORM>
</BODY>
</HTML>
[/code]
Start Free Trial
