[Javascript] Automatic drop-down population
Natalia Olive
natalia at natuscape.com
Mon Nov 25 14:07:46 CST 2002
Hi all!
I'm a newbie, and to make things worse I'm working off FrontPage
2002, so bear with me... :)
I created a form to submit data into a database and I'm trying to
use JavaScript to automatically populate a drop-down box as a
function of the choice made in another drop-down box. I got a
great example code from javascript.internet.com (it's pasted at
the bottom of this message), but I can't get it to work together
with the rest of my form. In particular, when I use the "webbot"
features of FP to conduct field validation, it stops working and I
get an error message saying that "myChoices" is undefined
("myChoices" is the name of the form that the author of the
snippet used).
For it to work, the form where the drop-down boxes are needs to be
free of all the webbot validations. I know I can do validation
with JS so first off I'm in need of guidance to do that.
I also would welcome anyone willing to read over the snippet that
I got and show me the best way to get rid of the third box,
because I only need two. I tried just deleting it out of the form
and not modifying the code, but that didn't turn out ok...
apparently I need to touch the code up but I don't want to break
it!
Thanks for bearing with me and reading this up... and thanks for
any handy replies!!
Natalia
CODE SNIPPET:
<!-- TWO STEPS TO INSTALL DROPDOWN BOX POPULATION:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML
document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Andrew Berry (aberry at berrysystems.com) -->
<!-- Web Site: http://www.berrysystems.com -->
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;
arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;
arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0
arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1
arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2
arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5
arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3
arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4
arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6
arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7
function selectChange(control, controlToPopulate, ItemArray,
GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--)
controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--)
myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML
document -->
<BODY>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange
(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange
(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts
provided<br>
by <a href="http://javascriptsource.com">The JavaScript
Source</a></font>
</center><p>
<!-- Script Size: 3.92 KB -->
________________________________________________________________
Sent via the KillerWebMail system at natuscape.com
More information about the Javascript
mailing list