Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Show/hide div according to list menu selection

Newbie
  
Join Date: Jul 2006
Posts: 3
#1: Jul 12 '06
Hi,

I am trying to figure out how to show or hide a selection of divs on my page depending on what is selected from a list/menu item, using css & javascript.

I have tried to use the script listed here: http://www.thescripts.com/forum/thread88791.html
but have been uable to customise it to my needs and could do with some help.

My form is asking people how many tickets they would like to an event & depending on their selection I need that number of divs (containing 3 feilds - guest name, company, email) to be displayed.

So far I have a list/menu with numbers from 1-20 as the values.

I then have a series of divs with ids of guest1 to guest20 all set to style="display:none"

When a number is selected from the list/menu I need that number of fields to be displayed so for example if someone selects 3 from the list/menu I will need guest1, guest2 and guest3 to change to style="display:block"

Can anyone help me out with the javascript?

Thanks!

Newbie
  
Join Date: Jul 2006
Posts: 3
#2: Jul 13 '06

re: Show/hide div according to list menu selection

Further to my last message, whilst waiting for a reply, I have been trying to figure out a way to do this on my own - so far unsuccessfully :confused:
I'm not very clued up with javascript, so please do not laugh, but these are what I have tried:

I have tried this in the body:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var guest=Form1.Tickets.value
  3. switch (guest)
  4. {
  5. case 1:
  6.   document.guest1.style.display = 'block';
  7.   break
  8. case 2:
  9.   document.guest1.style.display = 'block';
  10.   document.guest2.style.display = 'block';
  11.   break
  12. case 3:
  13.   document.guest1.style.display = 'block';
  14.   document.guest2.style.display = 'block';
  15.   document.guest3.style.display = 'block';
  16.   break
  17. default:
  18.   document.guest1.style.display = 'none';
  19.   document.guest2.style.display = 'none';
  20.   document.guest3.style.display = 'none';
  21.   document.guest4.style.display = 'none';
  22.   document.guest5.style.display = 'none';
  23.   document.guest6.style.display = 'none';
  24.   document.guest7.style.display = 'none';
  25.   document.guest8.style.display = 'none';
  26.   document.guest9.style.display = 'none';
  27.   document.guest10.style.display = 'none';
  28. }
  29. </script>
That didn't work so I tried to make it a function in the head:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function displayguests()
  3. var guest=Form1.Tickets.value
  4. if (guest==1)
  5. {
  6. document.guest1.style.display = 'block'
  7. }
  8. else if (guest==2)
  9. {
  10. document.guest1.style.display = 'block'
  11. document.guest2.style.display = 'block'
  12. }
  13. else if (guest==3)
  14. {
  15. document.guest1.style.display = 'block'
  16. document.guest2.style.display = 'block'
  17. document.guest3.style.display = 'block'
  18. }
  19. else if (guest==4)
  20. {
  21. document.guest1.style.display = 'block'
  22. document.guest2.style.display = 'block'
  23. document.guest3.style.display = 'block'
  24. document.guest4.style.display = 'block'
  25. }
  26. else if (guest==5)
  27. {
  28. document.guest1.style.display = 'block'
  29. document.guest2.style.display = 'block'
  30. document.guest3.style.display = 'block'
  31. document.guest4.style.display = 'block'
  32. document.guest5.style.display = 'block'
  33. }
  34. else if (guest==6)
  35. {
  36. document.guest1.style.display = 'block'
  37. document.guest2.style.display = 'block'
  38. document.guest3.style.display = 'block'
  39. document.guest4.style.display = 'block'
  40. document.guest5.style.display = 'block'
  41. document.guest6.style.display = 'block'
  42. }
  43. else if (guest==7)
  44. {
  45. document.guest1.style.display = 'block'
  46. document.guest2.style.display = 'block'
  47. document.guest3.style.display = 'block'
  48. document.guest4.style.display = 'block'
  49. document.guest5.style.display = 'block'
  50. document.guest6.style.display = 'block'
  51. document.guest7.style.display = 'block'
  52. }
  53. else if (guest==8)
  54. {
  55. document.guest1.style.display = 'block'
  56. document.guest2.style.display = 'block'
  57. document.guest3.style.display = 'block'
  58. document.guest4.style.display = 'block'
  59. document.guest5.style.display = 'block'
  60. document.guest6.style.display = 'block'
  61. document.guest7.style.display = 'block'
  62. document.guest8.style.display = 'block'
  63. }
  64. else if (guest==9)
  65. {
  66. document.guest1.style.display = 'block'
  67. document.guest2.style.display = 'block'
  68. document.guest3.style.display = 'block'
  69. document.guest4.style.display = 'block'
  70. document.guest5.style.display = 'block'
  71. document.guest6.style.display = 'block'
  72. document.guest7.style.display = 'block'
  73. document.guest8.style.display = 'block'
  74. document.guest9.style.display = 'block'
  75. }
  76. else if (guest==10)
  77. {
  78. document.guest1.style.display = 'block'
  79. document.guest2.style.display = 'block'
  80. document.guest3.style.display = 'block'
  81. document.guest4.style.display = 'block'
  82. document.guest5.style.display = 'block'
  83. document.guest6.style.display = 'block'
  84. document.guest7.style.display = 'block'
  85. document.guest8.style.display = 'block'
  86. document.guest9.style.display = 'block'
  87. document.guest10.style.display = 'block'
  88. }
  89. </script>
Called by the list/menu in the body:

Expand|Select|Wrap|Line Numbers
  1. <select name="Tickets" class="menu" onChange="displayguests()">
Also hasn't worked....

Just thought i'd show that I have been trying!

Any help would be appreciated!
Newbie
  
Join Date: Jul 2006
Posts: 3
#3: Jul 14 '06

re: Show/hide div according to list menu selection

If anyone is actually reading this post I have now found a solution that works:

Expand|Select|Wrap|Line Numbers
  1. <!--
  2. function showguest() {
  3.     if(document.getElementById('Tickets').value=='0') {
  4.         hide('guest1');
  5.         hide('guest2');
  6.         hide('guest3');
  7.         hide('guest4');
  8.         hide('guest5');
  9.         hide('guest6');
  10.         hide('guest7');
  11.         hide('guest8');
  12.         hide('guest9');
  13.         hide('guest10');
  14.         hide('guest11');
  15.         hide('guest12');
  16.         hide('guest13');
  17.         hide('guest14');
  18.         hide('guest15');
  19.         hide('guest16');
  20.         hide('guest17');
  21.         hide('guest18');
  22.         hide('guest19');
  23.         hide('guest20');
  24.     } else if(document.getElementById('Tickets').value=='1') {
  25.         show('guest1');
  26.         hide('guest2');
  27.         hide('guest3');
  28.         hide('guest4');
  29.         hide('guest5');
  30.         hide('guest6');
  31.         hide('guest7');
  32.         hide('guest8');
  33.         hide('guest9');
  34.         hide('guest10');
  35.         hide('guest11');
  36.         hide('guest12');
  37.         hide('guest13');
  38.         hide('guest14');
  39.         hide('guest15');
  40.         hide('guest16');
  41.         hide('guest17');
  42.         hide('guest18');
  43.         hide('guest19');
  44.         hide('guest20');
  45.     } else if(document.getElementById('Tickets').value=='2') {
  46.         show('guest1');
  47.         show('guest2');
  48.         hide('guest3');
  49.         hide('guest4');
  50.         hide('guest5');
  51.         hide('guest6');
  52.         hide('guest7');
  53.         hide('guest8');
  54.         hide('guest9');
  55.         hide('guest10');
  56.         hide('guest11');
  57.         hide('guest12');
  58.         hide('guest13');
  59.         hide('guest14');
  60.         hide('guest15');
  61.         hide('guest16');
  62.         hide('guest17');
  63.         hide('guest18');
  64.         hide('guest19');
  65.         hide('guest20');
  66.     } else if(document.getElementById('Tickets').value=='3') {
  67.         show('guest1');
  68.         show('guest2');
  69.         show('guest3');
  70.         hide('guest4');
  71.         hide('guest5');
  72.         hide('guest6');
  73.         hide('guest7');
  74.         hide('guest8');
  75.         hide('guest9');
  76.         hide('guest10');
  77.         hide('guest11');
  78.         hide('guest12');
  79.         hide('guest13');
  80.         hide('guest14');
  81.         hide('guest15');
  82.         hide('guest16');
  83.         hide('guest17');
  84.         hide('guest18');
  85.         hide('guest19');
  86.         hide('guest20');
  87.     } else if(document.getElementById('Tickets').value=='4') {
  88.         show('guest1');
  89.         show('guest2');
  90.         show('guest3');
  91.         show('guest4');
  92.         hide('guest5');
  93.         hide('guest6');
  94.         hide('guest7');
  95.         hide('guest8');
  96.         hide('guest9');
  97.         hide('guest10');
  98.         hide('guest11');
  99.         hide('guest12');
  100.         hide('guest13');
  101.         hide('guest14');
  102.         hide('guest15');
  103.         hide('guest16');
  104.         hide('guest17');
  105.         hide('guest18');
  106.         hide('guest19');
  107.         hide('guest20');
  108.     } else if(document.getElementById('Tickets').value=='5') {
  109.         show('guest1');
  110.         show('guest2');
  111.         show('guest3');
  112.         show('guest4');
  113.         show('guest5');
  114.         hide('guest6');
  115.         hide('guest7');
  116.         hide('guest8');
  117.         hide('guest9');
  118.         hide('guest10');
  119.         hide('guest11');
  120.         hide('guest12');
  121.         hide('guest13');
  122.         hide('guest14');
  123.         hide('guest15');
  124.         hide('guest16');
  125.         hide('guest17');
  126.         hide('guest18');
  127.         hide('guest19');
  128.         hide('guest20');
  129.     } else if(document.getElementById('Tickets').value=='6') {
  130.         show('guest1');
  131.         show('guest2');
  132.         show('guest3');
  133.         show('guest4');
  134.         show('guest5');
  135.         show('guest6');
  136.         hide('guest7');
  137.         hide('guest8');
  138.         hide('guest9');
  139.         hide('guest10');
  140.         hide('guest11');
  141.         hide('guest12');
  142.         hide('guest13');
  143.         hide('guest14');
  144.         hide('guest15');
  145.         hide('guest16');
  146.         hide('guest17');
  147.         hide('guest18');
  148.         hide('guest19');
  149.         hide('guest20');
  150.     } else if(document.getElementById('Tickets').value=='7') {
  151.         show('guest1');
  152.         show('guest2');
  153.         show('guest3');
  154.         show('guest4');
  155.         show('guest5');
  156.         show('guest6');
  157.         show('guest7');
  158.         hide('guest8');
  159.         hide('guest9');
  160.         hide('guest10');
  161.         hide('guest11');
  162.         hide('guest12');
  163.         hide('guest13');
  164.         hide('guest14');
  165.         hide('guest15');
  166.         hide('guest16');
  167.         hide('guest17');
  168.         hide('guest18');
  169.         hide('guest19');
  170.         hide('guest20');
  171.     } else if(document.getElementById('Tickets').value=='8') {
  172.         show('guest1');
  173.         show('guest2');
  174.         show('guest3');
  175.         show('guest4');
  176.         show('guest5');
  177.         show('guest6');
  178.         show('guest7');
  179.         show('guest8');
  180.         hide('guest9');
  181.         hide('guest10');
  182.         hide('guest11');
  183.         hide('guest12');
  184.         hide('guest13');
  185.         hide('guest14');
  186.         hide('guest15');
  187.         hide('guest16');
  188.         hide('guest17');
  189.         hide('guest18');
  190.         hide('guest19');
  191.         hide('guest20');
  192.     } else if(document.getElementById('Tickets').value=='9') {
  193.         show('guest1');
  194.         show('guest2');
  195.         show('guest3');
  196.         show('guest4');
  197.         show('guest5');
  198.         show('guest6');
  199.         show('guest7');
  200.         show('guest8');
  201.         show('guest9');
  202.         hide('guest10');
  203.         hide('guest11');
  204.         hide('guest12');
  205.         hide('guest13');
  206.         hide('guest14');
  207.         hide('guest15');
  208.         hide('guest16');
  209.         hide('guest17');
  210.         hide('guest18');
  211.         hide('guest19');
  212.         hide('guest20');
  213.     } else if(document.getElementById('Tickets').value=='10') {
  214.         show('guest1');
  215.         show('guest2');
  216.         show('guest3');
  217.         show('guest4');
  218.         show('guest5');
  219.         show('guest6');
  220.         show('guest7');
  221.         show('guest8');
  222.         show('guest9');
  223.         show('guest10');
  224.         hide('guest11');
  225.         hide('guest12');
  226.         hide('guest13');
  227.         hide('guest14');
  228.         hide('guest15');
  229.         hide('guest16');
  230.         hide('guest17');
  231.         hide('guest18');
  232.         hide('guest19');
  233.         hide('guest20');
  234.     } else if(document.getElementById('Tickets').value=='11') {
  235.         show('guest1');
  236.         show('guest2');
  237.         show('guest3');
  238.         show('guest4');
  239.         show('guest5');
  240.         show('guest6');
  241.         show('guest7');
  242.         show('guest8');
  243.         show('guest9');
  244.         show('guest10');
  245.         show('guest11');
  246.         hide('guest12');
  247.         hide('guest13');
  248.         hide('guest14');
  249.         hide('guest15');
  250.         hide('guest16');
  251.         hide('guest17');
  252.         hide('guest18');
  253.         hide('guest19');
  254.         hide('guest20');
  255.     } else if(document.getElementById('Tickets').value=='12') {
  256.         show('guest1');
  257.         show('guest2');
  258.         show('guest3');
  259.         show('guest4');
  260.         show('guest5');
  261.         show('guest6');
  262.         show('guest7');
  263.         show('guest8');
  264.         show('guest9');
  265.         show('guest10');
  266.         show('guest11');
  267.         show('guest12');
  268.         hide('guest13');
  269.         hide('guest14');
  270.         hide('guest15');
  271.         hide('guest16');
  272.         hide('guest17');
  273.         hide('guest18');
  274.         hide('guest19');
  275.         hide('guest20');
  276.     } else if(document.getElementById('Tickets').value=='13') {
  277.         show('guest1');
  278.         show('guest2');
  279.         show('guest3');
  280.         show('guest4');
  281.         show('guest5');
  282.         show('guest6');
  283.         show('guest7');
  284.         show('guest8');
  285.         show('guest9');
  286.         show('guest10');
  287.         show('guest11');
  288.         show('guest12');
  289.         show('guest13');
  290.         hide('guest14');
  291.         hide('guest15');
  292.         hide('guest16');
  293.         hide('guest17');
  294.         hide('guest18');
  295.         hide('guest19');
  296.         hide('guest20');
  297.     } else if(document.getElementById('Tickets').value=='14') {
  298.         show('guest1');
  299.         show('guest2');
  300.         show('guest3');
  301.         show('guest4');
  302.         show('guest5');
  303.         show('guest6');
  304.         show('guest7');
  305.         show('guest8');
  306.         show('guest9');
  307.         show('guest10');
  308.         show('guest11');
  309.         show('guest12');
  310.         show('guest13');
  311.         show('guest14');
  312.         hide('guest15');
  313.         hide('guest16');
  314.         hide('guest17');
  315.         hide('guest18');
  316.         hide('guest19');
  317.         hide('guest20');
  318.     } else if(document.getElementById('Tickets').value=='15') {
  319.         show('guest1');
  320.         show('guest2');
  321.         show('guest3');
  322.         show('guest4');
  323.         show('guest5');
  324.         show('guest6');
  325.         show('guest7');
  326.         show('guest8');
  327.         show('guest9');
  328.         show('guest10');
  329.         show('guest11');
  330.         show('guest12');
  331.         show('guest13');
  332.         show('guest14');
  333.         show('guest15');
  334.         hide('guest16');
  335.         hide('guest17');
  336.         hide('guest18');
  337.         hide('guest19');
  338.         hide('guest20');
  339.     } else if(document.getElementById('Tickets').value=='16') {
  340.         show('guest1');
  341.         show('guest2');
  342.         show('guest3');
  343.         show('guest4');
  344.         show('guest5');
  345.         show('guest6');
  346.         show('guest7');
  347.         show('guest8');
  348.         show('guest9');
  349.         show('guest10');
  350.         show('guest11');
  351.         show('guest12');
  352.         show('guest13');
  353.         show('guest14');
  354.         show('guest15');
  355.         show('guest16');
  356.         hide('guest17');
  357.         hide('guest18');
  358.         hide('guest19');
  359.         hide('guest20');
  360.     } else if(document.getElementById('Tickets').value=='17') {
  361.         show('guest1');
  362.         show('guest2');
  363.         show('guest3');
  364.         show('guest4');
  365.         show('guest5');
  366.         show('guest6');
  367.         show('guest7');
  368.         show('guest8');
  369.         show('guest9');
  370.         show('guest10');
  371.         show('guest11');
  372.         show('guest12');
  373.         show('guest13');
  374.         show('guest14');
  375.         show('guest15');
  376.         show('guest16');
  377.         show('guest17');
  378.         hide('guest18');
  379.         hide('guest19');
  380.         hide('guest20');
  381.     } else if(document.getElementById('Tickets').value=='18') {
  382.         show('guest1');
  383.         show('guest2');
  384.         show('guest3');
  385.         show('guest4');
  386.         show('guest5');
  387.         show('guest6');
  388.         show('guest7');
  389.         show('guest8');
  390.         show('guest9');
  391.         show('guest10');
  392.         show('guest11');
  393.         show('guest12');
  394.         show('guest13');
  395.         show('guest14');
  396.         show('guest15');
  397.         show('guest16');
  398.         show('guest17');
  399.         show('guest18');
  400.         hide('guest19');
  401.         hide('guest20');
  402.     } else if(document.getElementById('Tickets').value=='19') {
  403.         show('guest1');
  404.         show('guest2');
  405.         show('guest3');
  406.         show('guest4');
  407.         show('guest5');
  408.         show('guest6');
  409.         show('guest7');
  410.         show('guest8');
  411.         show('guest9');
  412.         show('guest10');
  413.         show('guest11');
  414.         show('guest12');
  415.         show('guest13');
  416.         show('guest14');
  417.         show('guest15');
  418.         show('guest16');
  419.         show('guest17');
  420.         show('guest18');
  421.         show('guest19');
  422.         hide('guest20');
  423.     } else if(document.getElementById('Tickets').value=='20') {
  424.         show('guest1');
  425.         show('guest2');
  426.         show('guest3');
  427.         show('guest4');
  428.         show('guest5');
  429.         show('guest6');
  430.         show('guest7');
  431.         show('guest8');
  432.         show('guest9');
  433.         show('guest10');
  434.         show('guest11');
  435.         show('guest12');
  436.         show('guest13');
  437.         show('guest14');
  438.         show('guest15');
  439.         show('guest16');
  440.         show('guest17');
  441.         show('guest18');
  442.         show('guest19');
  443.         show('guest20');
  444.     }
  445. }
  446.  
  447. function show(id) {
  448.     document.getElementById(id).style.display='block';
  449. }
  450.  
  451. function hide(id) {
  452.     document.getElementById(id).style.display='none';
  453. }
  454. //-->
Member
  
Join Date: Jul 2006
Location: Virginia Beach, VA
Posts: 69
#4: Jul 14 '06

re: Show/hide div according to list menu selection

Hey there, I think you need a different approach rather than hard-coding things like the way you are when you're working with such large numbers. Lets try something else.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script language="javascript">
  3. function ticketInfo()
  4. {
  5.   var fieldCount = document.getElementById("numTickets").value;  //get the number user entered
  6.   var targetField = document.getElementById("infosection");  //This is the container holding the default values for the repeated section
  7.   var sourceCode = targetField.innerHTML;  //Source code (default)
  8.   var newHTML = "";
  9.   for (var x=1;x<=fieldCount;x++)  //For each ticket the user wants
  10.   {
  11.     newHTML = newHTML + sourceCode.replace("#",x);  //Take the source code and replace the default icon (this case, #) and replace it with the current number.
  12.   }
  13.   targetField.innerHTML = newHTML;  //Replace the curent default with the new html
  14.   targetField.className = "show";  //Then show it
  15.   document.getElementById("fieldSection").className = "hide";  //Hide the user section.
  16.  
  17. //Instead of using classname you can also just say .style.display =  and then set to either block, inline or none.
  18. }
  19. </script>
  20. <style type="text/css">
  21. .hide
  22. {
  23.   display:none;
  24. }
  25. .show
  26. {
  27.   display:block;
  28. }
  29. </style>
  30. <body>
  31. <form name="form1">
  32. <div id="fieldSection">
  33. How many tickets? <input type="text" id="numTickets"/><input type="button" 
  34.  
  35. value="Go" onClick="ticketInfo()"/>
  36. </div>
  37. <hr/>
  38. <div id="infosection" class="hide">
  39. <!--Field Section, Put your individual default fields here and remove this 
  40.  
  41. comment-->
  42. <h4>Ticket #:</h4>
  43. First: <input type="text" name="firstField_#"/>
  44. Second: <input type="text" name="secondField_#"/>
  45. Third: <input type="text" name="thirdField_#"/>
  46. <hr/>
  47. </div>
  48. </form>
  49. </body>
  50. </html>
rwt's Avatar
rwt rwt is offline
Newbie
  
Join Date: Aug 2006
Posts: 2
#5: Aug 10 '06

re: Show/hide div according to list menu selection

Thanks a lot for your code.
I'm trying it out.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,510 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved