Jump to content

<div> visibility


mister_t101

Recommended Posts

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--]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.