By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,852 Members | 994 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,852 IT Pros & Developers. It's quick & easy.

Show/Hide data depends on user selection

P: 6
Hi,

I have a form where the user can select a product and the product info will appear next to it.

The products and the data on them all come from a db so I needed it to be dynamically.

After a quick search in Google I found half answer - I managed to display the product data but if the user selected another product the previous product data stayed and more data appeared.

I need to know how I hide data when another product is selected.

Here is the code so far:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Test Form</title>
  4. <script language="javascript">
  5. function show(selObj) {  
  6.      var selectedValue = selObj.options[selObj.selectedIndex].value;
  7.      document.getElementById(selectedValue).style.display = 'block'; 
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. <?php
  13. $db = New DB;
  14. $db->table="products";
  15. $titles = $db->FetchTitles();
  16. $titlesInfo = $db->Fetch();
  17. ?>
  18. <form>
  19. Select Product: <select id="products" name="MyProducts[]" onchange="show(this)">
  20. <?php
  21. foreach ($titles as $key => $value) {
  22.     print("<option value=\"$key\">$value</option>\n");
  23. }
  24. ?>
  25. </select><br />
  26. <?php
  27. foreach ($titlesInfo as $key => $value) {
  28.     print("<div id=\"$key\" style=\"display:none;\">");
  29.     foreach ($value as $keyf => $valuef) {
  30.         print($keyf . ": &nbsp; &nbsp; " . $valuef . " &nbsp;|&nbsp; \n");
  31.     }
  32.     print("</div>\n");
  33. }
  34. ?>
  35. </form>
  36. </body>
  37. </html>
  38.  
Thanks :)
Jan 2 '09 #1
Share this Question
Share on Google+
3 Replies


Expert 100+
P: 164
Try this instead by replacing your current SCRIPT block:

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2. global_var_last_shown = '';
  3.  
  4. function show(selObj) {
  5.      if(global_var_last_shown!='')
  6.           document.getElementById(global_var_last_shown).style.display = 'none';  
  7.  
  8.      var selectedValue = selObj.options[selObj.selectedIndex].value; 
  9.  
  10.      document.getElementById(selectedValue).style.display = 'block';  
  11.  
  12.      global_var_last_shown = selectedValue;
  13. </script> 
  14.  
I believe this should work because we keep a global variable to "remember" the last "element" shown. When the function is called the first time, the if statement never fires. After the function completes for the first time, the global variable now contains a value (is not = ''). That means the next time the function fires off, the if statement will fire off.
Jan 2 '09 #2

P: 6
Hi.

Thanks for your quick replay, it's working perfectly.

I have one more thing I want to add - giving the user the option to select number of products (dynamically), the best I can do is this:

Expand|Select|Wrap|Line Numbers
  1. function addInput(divName){
  2.           var newdiv = document.createElement('div');
  3.           newdiv.innerHTML = document.getElementById(divName).innerHTML
  4.           document.getElementById(divName).appendChild(newdiv);
  5.           counter++;
  6. }
  7.  
Of course I added a div before the select and a button with onClick event to call this function.

The problem is that it's doubling itself - showing 1, 2, 4, 8 and so on...

And it's displaying the hidden content of the first selection.

Got a solution?

Thanks :)
Jan 2 '09 #3

Expert 100+
P: 164
Please create a new thread for this solution.
Jan 5 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.