Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 radiobuttons. Onchange hide/display content

    Hi guys, I cant figure this out on my own. help is very appreciated.
    sorry for my bad english

    These are my 2 radiobuttons
    Code:
    <tr>
    <td><input type="radio" name="privateorpublic" id="privateorpublic" value="Private" checked>Private</td>
    <td><input type="radio" name="privateorpublic" id="privateorpublic" value="Public" >Public</td>
    </tr>
    radiobutton Private is set to checked and I'm trying to display these 3 table rows when public is selected. Then hide them again when they select private again. So I was trying some stuff using onclick="togglefunction()"

    this is my toughtprocess

    if radiobtn value public is selected (show tablerows with classname="hide")
    else (hide tablerows with classname "hide")

    css:
    Code:
    .hide {
    display: none;}
    Code:
    <tr class="hide">
    <td><label for="companyname">Companyname:</label></td>
    <td><input type="text" name="companyname" id="companyname"</td>
    </tr>
    <tr class="hide">
    <td><label for="adress">Adress:</label></td>
    <td><input type="text" name="adress" id="adress"</td>
    </tr>
    <tr class="hide">
    <td><label for="BTWnr">BTW number:</label></td>
    <td><input type="text" name="BTWnr" id="BTWnr"</td>
    </tr>
    any1 can set me on my way? thank you very much

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    38
    Thanked 505 Times in 499 Posts
    Consider these changes ...
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    
    </script>
    <style type="text/css">
    .hide { display:none;}
    </style>
    
    </head>
    <body>
    <table>
    <tr>
     <td><input type="radio" name="privateorpublic" value="Private" checked
      onclick="document.getElementById('tblInfo').style.display='none'">Private
     </td>
     <td><input type="radio" name="privateorpublic" value="Public"
      onclick="document.getElementById('tblInfo').style.display='block'">Public
     </td>
    </tr>
    </table>
    
    <table id="tblInfo" class="hide">
     <tr>
      <td><label for="companyname">Companyname:</label></td>
      <td><input type="text" name="companyname" id="companyname"</td>
     </tr>
     <tr>
      <td><label for="adress">Adress:</label></td>
      <td><input type="text" name="adress" id="adress"</td>
     </tr>
     <tr>
      <td><label for="BTWnr">BTW number:</label></td>
      <td><input type="text" name="BTWnr" id="BTWnr"</td>
     </tr>
    </table>
    
    </body>
    </html>
    NOTE: id values must be unique. You can not use the same ID for both radio buttons.

    Good Luck!
    Last edited by jmrker; 07-12-2012 at 04:53 PM.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Well for starters, name is not the same as className, className only applies if you assign a class.
    Put this in the input tags: onchange="changechecked(n);"
    where n = 0 for the first input and 1 for the second.
    Code:
    var ins = window.document.getElementsByName("privatepublic");
    function changechecked(N)
    {
    // Then put your conditional statements in here 
    }
    ins[0].checked = true; // Makes the first input checked onload.
    That should work.

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you guys!

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it works fine now, thanks again.
    The only little bug is that when public is selected and the tblInfo shows, when I refresh the page, public stays selected and the tblInfo doesnt show.

    Is there somthing i can do like onload()? select radiobtn private

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Question

    Quote Originally Posted by critz View Post
    it works fine now, thanks again.
    The only little bug is that when public is selected and the tblInfo shows, when I refresh the page, public stays selected and the tblInfo doesnt show.

    Is there somthing i can do like onload()? select radiobtn private

    What version is the final code you are using that is giving you problems?

  • #7
    New Coder
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Select public and then refresh the page


    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    
    </script>
    <style type="text/css">
    .hide { display:none;}
    </style>
    
    </head>
    <body>
    <table>
    <tr>
     <td><input type="radio" name="privateorpublic" id="private" value="Private" checked
      onclick="document.getElementById('tblInfo').style.display='none'">Private
     </td>
     <td><input type="radio" name="privateorpublic" id="public "value="Public"
      onclick="document.getElementById('tblInfo').style.display='block'">Public
     </td>
    </tr>
    </table>
    
    <table id="tblInfo" class="hide">
     <tr>
      <td><label for="companyname">Companyname:</label></td>
      <td><input type="text" name="companyname" id="companyname"</td>
     </tr>
     <tr>
      <td><label for="adress">Adress:</label></td>
      <td><input type="text" name="adress" id="adress"</td>
     </tr>
     <tr>
      <td><label for="BTWnr">BTW number:</label></td>
      <td><input type="text" name="BTWnr" id="BTWnr"</td>
     </tr>
    </table>
    
    </body>
    </html>


  •  

    Posting Permissions

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