You are here: irt.org | FAQ | JavaScript | Form | 4 | Q1046 [ previous next ]
Try something like:
<html>
<head>
<script language="JavaScript"><!--
var whatForm, whatTo, whatText;
function reshow(number) {
whatFrom = document.forms['formName' + number].elements['selectName' + number];
number++;
whatTo = document.forms['formName' + number].elements['selectName' + number];
for (var i = whatTo.length;i > 0;i--)
whatTo.options[0] = null;
whatText = whatFrom.options[whatFrom.selectedIndex].text;
showLink(number);
whatTo.options[0].selected = true;
if (number == 2)
reshow(2);
return false;
}
function load(number) {
what = document.forms['formName' + number].elements['selectName' + number];
window.location.href = what.options[what.selectedIndex].value;
return false;
}
function showLink(number) {
if (number == 2)
showLink2()
else if (number == 3)
showLink3();
}
function showLink2() {
if (whatText == 'Red') {
opt('red/ball.htm','Red Ball');
opt('red/hat.htm','Red Hat');
}
if (whatText == 'Green') {
opt('green/grass.htm','Green Grass');
opt('green/tree.htm','Green Tree');
}
if (whatText == 'Blue') {
opt('blue/sky.htm','Blue Sky');
opt('blue/car.htm','Blue Car');
}
}
function showLink3(text) {
if (whatText == 'Red Ball') {
opt('red/ball/round.htm','Round Red Ball');
opt('red/ball/flat.htm','Flat Red Ball');
}
if (whatText == 'Red Hat') {
opt('red/hat/top.htm','Red Top Hat');
opt('red/hat/flap.htm','Red Flap Cap');
}
if (whatText == 'Green Grass') {
opt('green/grass/tall.htm','Tall Green Grass');
opt('green/tree/cut.htm','Green Cut Grass');
}
if (whatText == 'Green Tree') {
opt('green/tree/oak.htm','Green Oak Tree');
opt('green/tree/elm.htm','Green Elm Tree');
}
if (whatText == 'Blue Sky') {
opt('blue/sky/cloudy.htm','Cloudy Blue Sky');
opt('blue/sky/clear.htm','Clear Blue Sky');
}
if (whatText == 'Blue Car') {
opt('blue/car/sports.htm','Blue Sports Car');
opt('blue/car/racing.htm','Blue Racing Car');
}
}
function opt(href,text) {
var optionName = new Option(text, href, false, false)
var length = whatTo.length;
whatTo.options[length] = optionName;
}
//--></script>
</head>
<body>
<center>
<form name="formName1" onSubmit="return load(1)">
<select name="selectName1" onChange="reshow(1)">
<option value="red.htm" selected>Red
<option value="green.htm">Green
<option value="blue.htm">Blue
</select>
<input type="submit" value="Go">
</form>
<form name="formName2" onSubmit="return load(2)">
<select name="selectName2" onChange="reshow(2)">
<option value="red/ball.htm" selected>Red Ball
<option value="red/hat.htm">Red Hat
</select>
<input type="submit" value="Go">
</form>
<form name="formName3" onSubmit="return load(3)">
<select name="selectName3">
<option value="red/ball/round.htm" selected>Round Red Ball
<option value="red/hat/flat.htm">Flat Red Hat
</select>
<input type="submit" value="Go">
</form>
</center>
</body>
</html>The following was submitted by Derek Porter
Use DHTML databinding and tabular data control. Only problem is that only MS IExplorer supports this. Get a good book on DHTML, I am fuzzy on details, hope this helps.
The DHTML code:
<-- declare file handle --> <object id="hatch" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" border="0" width="0" height="0"> <param name="DataURL" value="cgi-bin/data/hatch.txt"> <-- file and path on server --> <param name="UseHeader" value="True"> <param name="FieldDelim" value="|"> <-- coma is default, I use "|" -- > </object> <table> <tr> <td width="100"><B>Fly</b></td> <-- column headings --> <td width="200"><b>Pattern</b></td> <td width="100"><b>Size</b></td> </tr></table> <table datasrc="#hatch" border=2> <-- file handle --> <tr> <td width="100"><span DATAFLD="fly" dataformatas="html"></span></td> <-- where data goes --> <td width="200"><span DATAFLD="pattern" dataformatas="html"></span></td> <td width="100"><span DATAFLD="size" dataformatas="html"></span></td> </tr> </table>
The test file: first line is data format/not displayed, the next two are records using "|" as field delimiter.
fly|pattern|size Ligh Cahill|Standard Dry<br>Parachute<br>Cahill Nymph|16-12 Tan Caddis|Tan ElkHair Caddis<br>Creme Caddis Pupa<br>Olive Caddis Pupa|16-12