Jump to content


Photo

<div> visibility


  • Please log in to reply
No replies to this topic

#1 mister_t101

mister_t101
  • New Members
  • Pip
  • Newbie
  • 9 posts

Posted 03 April 2006 - 02:08 PM

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--]<html>
<head>
<title>Flower Order Form</title>
<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 <div> 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;
}
}
</script>
</head>

<body>
<h3>Flower Order Form</h3>
<form action="processorder.php" method="post">
Select how many flowers you would like:

<select id='numflowers'
onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 6);">
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5
<option value='5'>6

</select>


<div id='divColor1' style="display: none;">
Choose type of flower 1:<br><br>
<input type="radio" name="color1" value="red">Red<br>
<input type="radio" name="color1" value="white">White<br>
<input type="radio" name="color1" value="yellow">Yellow<br>
</div>

<div id='divColor2' style="display: none;">
Choose type of flower 2:<br><br>
<input type="radio" name="color2" value="red">Red<br>
<input type="radio" name="color2" value="white">White<br>
<input type="radio" name="color2" value="yellow">Yellow<br>
</div>

<div id='divColor3' style="display: none;">
Choose type of flower 3:<br><br>
<input type="radio" name="color3" value="red">Red<br>
<input type="radio" name="color3" value="white">White<br>
<input type="radio" name="color3" value="yellow">Yellow<br>
</div>

<div id='divColor4' style="display: none;">
Choose type of flower 4:<br><br>
<input type="radio" name="color4" value="red">Red<br>
<input type="radio" name="color4" value="white">White<br>
<input type="radio" name="color4" value="yellow">Yellow<br>
</div>

<div id='divColor5' style="display: none;">
Choose type of flower 5:<br><br>
<input type="radio" name="color5" value="red">Red<br>
<input type="radio" name="color5" value="white">White<br>
<input type="radio" name="color5" value="yellow">Yellow<br>
</div>

<div id='divColor6' style="display: none;">
Choose type of flower 6:<br><br>
<input type="radio" name="color6" value="red">Red<br>
<input type="radio" name="color6" value="white">White<br>
<input type="radio" name="color6" value="yellow">Yellow<br>
</div>

<br>
<input type="submit" value="Next Step">
</form>

</body>
</html>

[!--html2--][/div][!--html3--]




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users