[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