473,399 Members | 3,888 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,399 software developers and data experts.

Show/Hide data depends on user selection

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
3 3275
Nicodemas
164 Expert 100+
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
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
Nicodemas
164 Expert 100+
Please create a new thread for this solution.
Jan 5 '09 #4

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

Similar topics

3
by: Owen Funkhouser | last post by:
I have a form with three radio options. And I have three buttons: <input type="submit" name="mainform_action" value="Edit Data"> <input type="submit" name="mainform_action" value="View Data">...
5
by: Jim Cobban | last post by:
I am trying to create a web page in which the contents of one selection list depends upon which element in another selection list is chosen, but where the information to populate the first...
5
by: dje | last post by:
In the OnClick event on a radioButtonList, I run a javascript to show/hide the appropriate div along with a submit button, which displays as expected. The problem is the submit no longer works on...
3
by: Lynn | last post by:
Hello, I have a user control that contains a table, and some text fields. I would like to show or hide a particular row of this table, based on a selection the user makes on my page. Here's...
5
by: srampally | last post by:
I need the capabilty to hide/show a selection list, just the way its done at http://www.lufthansa.com (place the cursor over "Group Companies"). However, I am looking for a javascript that is much...
1
by: nubianqnn | last post by:
Hello All, I am stumped on a function to show/hide drop down elements based on a user's selection. If a user selects a second item from the first dropdown list, then I want to show a related...
4
by: nubianqnn | last post by:
I am stumped on a function to show/hide drop down elements based on a user's selection. If a user selects a second item from the first dropdown list, then I want to show a related dropdown with two...
13
by: rupak | last post by:
Hi! I have a multiple selection of checkboxes <input type='checkbox' name='coffee' id='col1' value='Address'/> <input type='checkbox' name='coffee' id='col2' value='Name'/> <input...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.