Show different HTML form depending on Radio Button selection

**dmillerw** · January 9th, 2010

As the title suggests, I'm trying to get certain forms to show depending on which Radio button is selected.

I'm attempting to base it of this..

Code:

<html>
<head>
<script>
function RadioGroup1_toggle(c)
{
   if (c.value == 'yes')
      document.getElementById('hideme').style.visibility='visible';
   else
      document.getElementById('hideme').style.visibility='hidden';
}
</script>
</head>
<body>
<table width="551" border="0" cellpadding="5" cellspacing="0">
  <tr>
    <th valign="top"><div align="left">label1</div></th>
    <td>
      <input name="RadioGroup1" type="radio" id="yes" onClick="RadioGroup1_toggle(this);" value="yes" />
      <label>Yes</label>
      <input name="RadioGroup1" type="radio" id="no" onClick="RadioGroup1_toggle(this);" value="no" checked />
      <label>No</label>
      </td>
  </tr>
  <tr id="hideme" style="visibility:hidden;">
    <th valign="top">label2:</th>
    <td><input name="text2" type="text" id="text2" size="50" /></td>
  </tr>
</table>
</body>
</html>

But can't get past only have two options.

Using this...

Code:

<html>
<body>
<form action="insert.php" method="post">
First name: <input type="text" name="FName" />
<br>
Last name: <input type="text" name="LName" />
<br>
Username: <input type="text" name="UName" />
<br>
Student ID: <input type="text" name="StuID" />
<br>
Category:
<br>
<input type="radio" name=Cat value="School" >School
<br>
<input type="radio" name=Cat value="Facebook">Facebook
<br>
<input type="radio" name=Cat value="MySpace">MySpace
<br>
<input type="radio" name=Cat value="Other">Other
<br>
<input type="submit" value="Update Database" />
</form>

</body>
</html>

I'm trying to make it so if "School" is selected, then it shows the "FName" "LName" "UName" and StuID" forms, and if Facebook or MySpace is selected to show "FName" "LName" "UName" "PWord" "E-Mail".

Anyone?

**The Secret** · January 9th, 2010

JavaScript / DIVs display property ( block, none ).

**dmillerw** · January 10th, 2010

Originally Posted by The Secret

JavaScript / DIVs display property ( block, none ).

Sorry, what?

**dmillerw** · January 10th, 2010

The best I've been able to do so far is to toggle the fields, and that obviously isn't what I'm after, any ideas?

**shadylookin** · January 10th, 2010

You need to use javascript to hide or make visible the forms that you want

PHP Code:


<?xml version = "1.0"?>



<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <script type="text/javascript">

            function displayForm(c){

                if(c.value == "1"){

                    document.getElementById("form1").style.visibility='visible';

                    document.getElementById("form2").style.visibility='hidden';

                }

                else if(c.value =="2"){

                    document.getElementById("form1").style.visibility='hidden';

                    document.getElementById("form2").style.visibility='visible';

                }

                else{

                }

            

            }        

        </script>    

    </head>

    <body>

        <form>

            <label>Form 1<input value="1" type="radio" name="formselector" onclick="displayForm(this)"></label>    

            <label>Form 2<input value="2" type="radio" name="formselector" onclick="displayForm(this)"></label>    

        </form>

    

        <form style="visibility:hidden" id="form1"><label>Form 1<input type="text"/> </label></form>    

        

        <form style="visibility:hidden" id="form2"><label>Form 2<input type="text"/> </label></form>    

    

    </body>



</html>

depending on which choice you select you get a different form displayed. That should get you in the right direction