mister_t101 Posted April 3, 2006 Share Posted April 3, 2006 I am trying to create a dynamic menu in which a drop down box appears as the result of the selection in another drop down box. As a JS newb, I am trying to base my code off of [a href=\"http://www.zimmertech.com/tutorials/javascript/22/interactive-hidden-forms-tutorial.php\" target=\"_blank\"]http://www.zimmertech.com/tutorials/javasc...ms-tutorial.php[/a], but it doesn't have exactly what I want. I want the div for the selected number , and only that div to be visible, changing when the user selects another value from the drop down box. Here is the code I've come up with so far, but I'm not sure why it's not working. [!--html--][div class=\'htmltop\']HTML[/div][div class=\'htmlmain\'][!--html1--]<[color=blue]html[/color]><[color=blue]head[/color]><[color=blue]title[/color]>Flower Order Form<[color=blue]/title[/color]><script>function ShowMenu(num, menu, max) { var num4 = num; while(num4 <= max){ var menu3 = menu + num2; //hide document.getElementById(menu3).style.display = 'none'; //add one to loop num2=num2+1; var menu3 = menu + num//starting at one, loop through until the number chosen by the user for(i = 1; i <= num; i++){ //add number onto end of menu var menu2 = menu + num; document.getElementById(menu2).style.display = 'block'; } //make a number one more than the number inputed var num2 = num; num2++; //hide it if the viewer selects a number lower //this will hide every number between the selected number and the maximum //ex. if 3 is selected, hide the <[color=blue]div[/color]> cells for 4, 5, and 6 //loop until max is reached while(num2 <= max){ var menu3 = menu + num2; //hide document.getElementById(menu3).style.display = 'none'; //add one to loop num2=num2+1; } }<[color=blue]/script[/color]><[color=blue]/head[/color]><[color=blue]body[/color]><[color=blue]h3[/color]>Flower Order Form<[color=blue]/h3[/color]><[color=blue]form action[/color]="[color=orange]processorder.php[/color]" method="[color=orange]post[/color]">Select how many flowers you would like:<[color=blue]select id[/color]='[color=orange]numflowers[/color]' onChange="[color=orange]javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 6);[/color]"> <[color=blue]option value[/color]='[color=orange]0[/color]'>Number of Flowers <[color=blue]option value[/color]='[color=orange]1[/color]'>1 <[color=blue]option value[/color]='[color=orange]2[/color]'>2 <[color=blue]option value[/color]='[color=orange]3[/color]'>3 <[color=blue]option value[/color]='[color=orange]4[/color]'>4 <[color=blue]option value[/color]='[color=orange]5[/color]'>5 <[color=blue]option value[/color]='[color=orange]5[/color]'>6<[color=blue]/select[/color]><[color=blue]div id[/color]='[color=orange]divColor1[/color]' style="[color=orange]display: none;[/color]"> Choose type of flower 1:<[color=blue]br[/color]><[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color1[/color]" value="[color=orange]red[/color]">Red<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color1[/color]" value="[color=orange]white[/color]">White<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color1[/color]" value="[color=orange]yellow[/color]">Yellow<[color=blue]br[/color]><[color=blue]/div[/color]><[color=blue]div id[/color]='[color=orange]divColor2[/color]' style="[color=orange]display: none;[/color]"> Choose type of flower 2:<[color=blue]br[/color]><[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color2[/color]" value="[color=orange]red[/color]">Red<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color2[/color]" value="[color=orange]white[/color]">White<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color2[/color]" value="[color=orange]yellow[/color]">Yellow<[color=blue]br[/color]><[color=blue]/div[/color]><[color=blue]div id[/color]='[color=orange]divColor3[/color]' style="[color=orange]display: none;[/color]"> Choose type of flower 3:<[color=blue]br[/color]><[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color3[/color]" value="[color=orange]red[/color]">Red<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color3[/color]" value="[color=orange]white[/color]">White<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color3[/color]" value="[color=orange]yellow[/color]">Yellow<[color=blue]br[/color]><[color=blue]/div[/color]><[color=blue]div id[/color]='[color=orange]divColor4[/color]' style="[color=orange]display: none;[/color]"> Choose type of flower 4:<[color=blue]br[/color]><[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color4[/color]" value="[color=orange]red[/color]">Red<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color4[/color]" value="[color=orange]white[/color]">White<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color4[/color]" value="[color=orange]yellow[/color]">Yellow<[color=blue]br[/color]><[color=blue]/div[/color]><[color=blue]div id[/color]='[color=orange]divColor5[/color]' style="[color=orange]display: none;[/color]"> Choose type of flower 5:<[color=blue]br[/color]><[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color5[/color]" value="[color=orange]red[/color]">Red<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color5[/color]" value="[color=orange]white[/color]">White<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color5[/color]" value="[color=orange]yellow[/color]">Yellow<[color=blue]br[/color]><[color=blue]/div[/color]><[color=blue]div id[/color]='[color=orange]divColor6[/color]' style="[color=orange]display: none;[/color]"> Choose type of flower 6:<[color=blue]br[/color]><[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color6[/color]" value="[color=orange]red[/color]">Red<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color6[/color]" value="[color=orange]white[/color]">White<[color=blue]br[/color]> <[color=blue]input type[/color]="[color=orange]radio[/color]" name="[color=orange]color6[/color]" value="[color=orange]yellow[/color]">Yellow<[color=blue]br[/color]><[color=blue]/div[/color]><[color=blue]br[/color]><[color=blue]input type[/color]="[color=orange]submit[/color]" value="[color=orange]Next Step[/color]"><[color=blue]/form[/color]><[color=blue]/body[/color]><[color=blue]/html[/color]>[!--html2--][/div][!--html3--] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.