[Javascript] Re: Automatic drop-down population

Cutter (javascript list) javascript at theblades-family.com
Fri Nov 29 08:14:46 CST 2002


Natalia, 

The "webbot" form validation functions of FP are awful, and don't work well 
with other custom scripts. I would look at other form validation scripts, 
and use your own instead of the FP fv. I think you'll get much better 
results. I know that WYSIWYG editors like FP and Dreamweaver can greatly 
assist one in development, especially if you are a very visual oriented 
individual, but nothing beats a good old fashioned text editor is web 
development. FP throws so much bloated code in their pages that it actually 
hinders good development. My two cents. 

Cutter 

Natalia Olive writes: 

> 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 
> 
> 
>  
>                    
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
 



More information about the Javascript mailing list