I've cobbled together a page for data input which uses Peter-Paul's
dynamic form creating script (thanks ppk!) along with some code to
dynamically populate a select box based on the value of another. It
works fine in Netscape (against which it was developed), but it needs to
work in IE 5 and 6 (the browser on everyone's workstation) and it's not.
When you alter the selection in the third box (category_x), it should
alter the available options in the fourth box (type_x) on the same row.
IE doesn't seem to like "eval("document.landUse.category" + counter)"
when referring to dynamically created form elements. Is this diagnosis
correct and, if so, is there a workaround?
I can't rule out the possibility that a typo has crept into the code,
but FWIW, the Netscape console is empty after the page has been loaded
and used. The code is below and, because of the line-wrap, also at
<http://www.fairbanks.co.uk/temp/form.html>
If you can help at all, I'd be very grateful. Thanks!
<script language="JavaScript" type="text/javascript">
<!--
// moreFields() adds another rows to the page.
var counter = 0;
function moreFields() {
counter++;
var newFields =
document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name;
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields, insertHere);
relate(eval("document.landUse.category_" + counter));
}
// Store all the category types in an array of objects.
var categories = new Array();
categories[0] = [{text: "Allotments", value: "allotments"}, {text:
"Crop", value: "crop"}, {text: "Meadow", value: "meadow"}, {text:
"Orchard", value: "orchard"}];
categories[1] = [{text: "Academic", value: "academic"}, {text:
"Commercial", value: "commercial"}, {text: "Industrial", value:
"industrial"}, {text: "Public", value: "public"}, {text: "Residential",
value: "residential"}];
categories[2] = [{text: "Cycle Path", value: "cyclepath"}, {text:
"Road", value: "road"}, {text: "Motorway", value: "motorway"}];
categories[3] = [{text: "Golf Course", value: "golf"}, {text:
"Parkland", value: "parkland"}, {text: "Playground", value: "playgrnd"},
{text: "Playing Fields", value: "playflds"}];
categories[4] = [{text: "Basement", value: "basement"}, {text: "Car
Park", value: "carpark"}, {text: "Railway", value: "railway"}];
categories[5] = [{text: "Canal", value: "canal"}, {text: "Culvert",
value: "culvert"}, {text: "Drainage Ditch", value: "drainditch"}, {text:
"Lake", value: "lake"}, {text: "Resevoir", value: "resevoir"}, {text:
"River", value: "river"}, {text: "Stream", value: "stream"}];
categories[6] = [{text: "Car Park", value: "carpark"}, {text:
"Cemetery", value: "cemetery"}, {text: "Marshland", value: "marshland"},
{text: "Nature Reserve", value: "natureresv"}, {text: "Nursery", value:
"nursery"}, {text: "Railway", value: "railway"}, {text: "SSSI", value:
"sssi"}, {text: "Wasteland", value: "wasteland"}, {text: "Woodland",
value: "woodland"}, {text: "Zoo", value: "zoo"}];
// relate() updates the options in a drop-down when it's parent was
altered.
function relate(field) {
// Determine which category was changed.
var name = field.name;
var row = name.split("_")[1];
// Remove all but one of the options in it's related select.
var options = eval("document.landUse.type_" + row + ".options");
for (var i = options.length - 1; i > 0; i--) {
options[i] = null;
}
// Determine which values should be used from the array to populate
the options.
var category = categories[eval("document.landUse.category_" + row +
".selectedIndex")];
// and populate it with the values for this element in the array.
for (var j = 0; j < category.length; j++) {
options[j] = new Option(category[j].text, category[j].value);
}
// Select the first element in the new option range.
options[0].selected = true;
}
// -->
</script>
<body onLoad="moreFields();">
<!--- This part of the form is invisible and serves as the template from
which new rows are created. --->
<div id="readroot" style="display: none;">
<select name="direction_" style="width: 95px;">
<option value="n" selected="selected">North</option>
<option value="ne">North East</option>
<option value="e">East</option>
<option value="se">South East</option>
<option value="s">South</option>
<option value="sw">South West</option>
<option value="w">West</option>
<option value="nw">North West</option>
</select>
<select name="distance_" style="width: 125px;">
<option value="0" selected="selected">Adjacent</option>
<option value="1">Within 50 metres</option>
</select>
<select name="category_" style="width: 140px;" onChange="relate(this);">
<option value="ag" selected="selected">Agricultural</option>
<option value="bl">Building</option>
<option value="hw">Highway</option>
<option value="rg">Recreation Ground</option>
<option value="ug">Underground</option>
<option value="sw">Surface Water</option>
<option value="ot">Other</option>
</select>
<select name="type_" style="width: 125px;">
<option value="" selected="selected"></option>
</select>
<input type="text" name="description_" style="width: 150px;"
title="Enter any description here">
<input type="button" value="Remove"
onClick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
<form action="form.html" method="post" name="landUse">
<span id="writeroot"></span>
<input type="button" value="Add" onClick="moreFields();" />
<input type="submit" value="Save" onClick="return confirm('Are you sure
you want to save the data above?');" />
</form>
</body>
--
Aidan Whitehall <[EMAIL PROTECTED]>
Macromedia ColdFusion Developer
Fairbanks Environmental Ltd +44 (0)1695 51775
________________________________________________________________________
This e-mail has been scanned for all viruses by Star Internet. The
service is powered by MessageLabs. For more information on a proactive
anti-virus service working around the clock, around the globe, visit:
http://www.star.net.uk
________________________________________________________________________
--
** Archive: http://www.mail-archive.com/dev%40lists.cfdeveloper.co.uk/
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
For human help, e-mail: [EMAIL PROTECTED]
