Member Avatar for The_Restore_Lab

I am trying to design an HTML form that has table rows that are dynamically created in PHP, however i need to hide these rows until the user makes a selection. I am totally new to javascript and have only been coding in PHP for a few months now.

Please can anyone advise me?

PLEASE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • 3 Contributors
  • 4 Replies
  • 604 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by hollystyles
Member Avatar for hollystyles

Look into CSS particularly the visibility: hidden/visible attribute. I have an example on my hard drive which I post here as I haven't answered this question here before... much!!:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>ShowHideControl</title>
    <script type="text/javascript">
        function toggleVisibility(controlId)
        {
            var control = document.getElementById(controlId);
            if(control.style.visibility == "visible" || control.style.visibility == "")
                control.style.visibility = "hidden";
            else 
                control.style.visibility = "visible";
              
        }
    </script>
    <script type="text/javascript">
    function toggleTable(button)
    {
       if(button.value == "Show")
        {
            button.value = "Hide";
            document.getElementById("table1").style.visibility = "visible";
       }
       else
       {
            button.value = "Show";
            document.getElementById("table1").style.visibility = "hidden";
       }
    }
</script>

</head>
<body>
    <input type="text" id="TextBox1" />
    <input type="button" id="btnShowHide" value="Show/Hide" onclick="toggleVisibility('TextBox1');" />
    <table id="table1" style="visibility: hidden">
    <tr><td>A table Cell</td></tr>
    </table>
<input type="button" id="btnToggle" value="Show" onclick="toggleTable(this);" />
</body>
</html>
Member Avatar for The_Restore_Lab

thanks man
i'll try it n get back to u asap

Member Avatar for jsmart

This is so close to what I need - thank you - your example works perfectly, and helped me to understand my problem.

That said, my problem is causing me much grief. My skills are php. JS is a heaache for me! The goal:
1 drop down menu, with (for instance) Vinyl, CD, DVD. If you select Vinyl you see the next dropdown of 33,45 and 78. If you select CD the next drop down will appear saying 3", 5". And if you select DVD you will see Regular,lue Ray or or HD DVD.

Modifying your code, I tried:
<Select name="test">
<option value="1"> 1</option>
<option value="2" onselect="toggleVisibility('TextBox1');">q 2</option>
<option value="3"> 3</option>
</select>
where it says onselect - I tried on many things - none worked. Maybe I need to add an identifier to the select, or to the option. Maybe I am doing this completley wrong. Maybe this is not possible? (Although, I am sure it is)

Any help would be truly appreciated. Thank you in advance for your time.

John

Member Avatar for hollystyles

Try this:

<Select name="test" onchange="toggleVisibility('TextBox1');">
<option value="1"> 1</option>
<option value="2">q 2</option>
<option value="3"> 3</option>
</select>

My skills are php. JS is a heaache for me!

Do you know http://www.w3schools.com ?

It's an excellent resource for this kind of thing.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.