Show/Hide data depends on user selection

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • yarivot26
    New Member
    • Oct 2008
    • 6
    #1

    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:

    Code:
    <html>
<head>
<title>Test Form</title>
<script language="javascript">
function show(selObj) {  
     var selectedValue = selObj.options[selObj.selectedIndex].value;
     document.getElementById(selectedValue).style.display = 'block'; 
}
</script>
</head>
<body>
<?php
$db = New DB;
$db->table="products";
$titles = $db->FetchTitles();
$titlesInfo = $db->Fetch();
?>
<form>
Select Product: <select id="products" name="MyProducts[]" onchange="show(this)">
<?php
foreach ($titles as $key => $value) {
    print("<option value=\"$key\">$value</option>\n");
}
?>
</select><br />
<?php
foreach ($titlesInfo as $key => $value) {
    print("<div id=\"$key\" style=\"display:none;\">");
    foreach ($value as $keyf => $valuef) {
        print($keyf . ": &nbsp; &nbsp; " . $valuef . " &nbsp;|&nbsp; \n");
    }
    print("</div>\n");
}
?>
</form>
</body>
</html>
    Thanks :)
    Tags: None
    • Nicodemas
      Recognized Expert New Member
      • Nov 2007
      • 164
      #2
      Try this instead by replacing your current SCRIPT block:

      Code:
      <script language="javascript">
global_var_last_shown = '';

function show(selObj) {
     if(global_var_last_shown!='')
          document.getElementById(global_var_last_shown).style.display = 'none';  

     var selectedValue = selObj.options[selObj.selectedIndex].value; 

     document.getElementById(selectedValue).style.display = 'block';  

     global_var_last_shown = selectedValue;
} 
</script>
      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.
      Last edited by Nicodemas; Jan 2 '09, 05:05 PM. Reason: more explanation

        Comment

        • yarivot26
          New Member
          • Oct 2008
          • 6
          #3
          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:

          Code:
          function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = document.getElementById(divName).innerHTML
          document.getElementById(divName).appendChild(newdiv);
          counter++;
}
          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 :)

            Comment

            • Nicodemas
              Recognized Expert New Member
              • Nov 2007
              • 164
              #4
              Please create a new thread for this solution.

                Comment

                Previous template Next
                Working...