Results 1 to 7 of 7

Thread: Show different HTML form depending on Radio Button selection

  1. #1
    Join Date
    Dec 2008
    Location
    127.0.0.1
    Beans
    187
    Distro
    Ubuntu Development Release

    Show different HTML form depending on Radio Button selection

    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?

  2. #2
    Join Date
    Dec 2009
    Location
    56° 53' 24° 05'
    Beans
    Hidden!
    Distro
    Ubuntu 9.10 Karmic Koala

    Re: Show different HTML form depending on Radio Button selection

    JavaScript / DIVs display property ( block, none ).

  3. #3
    Join Date
    Dec 2008
    Location
    127.0.0.1
    Beans
    187
    Distro
    Ubuntu Development Release

    Re: Show different HTML form depending on Radio Button selection

    Quote Originally Posted by The Secret View Post
    JavaScript / DIVs display property ( block, none ).
    Sorry, what?

  4. #4
    Join Date
    Dec 2008
    Location
    127.0.0.1
    Beans
    187
    Distro
    Ubuntu Development Release

    Re: Show different HTML form depending on Radio Button selection

    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?

  5. #5
    Join Date
    Dec 2006
    Location
    USA
    Beans
    278
    Distro
    Ubuntu 11.04 Natty Narwhal

    Re: Show different HTML form depending on Radio Button selection

    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

  6. #6
    Join Date
    Dec 2008
    Location
    127.0.0.1
    Beans
    187
    Distro
    Ubuntu Development Release

    Re: Show different HTML form depending on Radio Button selection

    Ah, thank you, I knew it was something like it

  7. #7
    Join Date
    Sep 2006
    Location
    Ontario, Canada
    Beans
    203
    Distro
    Ubuntu 8.04 Hardy Heron

    Re: Show different HTML form depending on Radio Button selection

    This was a helpful bit of code; thanks!

    I didn't realize this was in the Ubuntu forums until a while after utilizing the code; so just wanted to make a mention that once again, the Ubuntu community proves awesome, even in something totally unrelated to Ubuntu (although, I'm on Ubuntu as I type this).
    Robbie Ferguson, Host
    Category5 Technology TV
    www.Category5.TV

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •