[Javascript] Automatic drop-down population

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">

<!-- 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