SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Radio button hide a table

    Anyone with javascript experience please help me:
    I got to radio button, by default the first radio button is checked and display a table below with all the values, if I click on the second radio button, the table will hide and another table will display with different value. Just like a swich

    <input type=radio name=radio1 value="" checked>
    <input type =radio name=radio2 value="">
    <table1> will tight with radio1 when click radio1
    <table2> will tight with radio2 when click radio2
    thnks you so much for your helpundefined

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there jlpl,

    and a warm welcome to these forums

    Try this it may suit your purposes...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>radio switching</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    #table1{
         width:200px;
         border:solid 1px #000;
    }
    #table1 td {
         width:200px;
         border:solid 1px #000;
         text-align:center;
    }
    #table2 {
         width:300px;
         border:solid 1px #000;
         display:none;
    }
    #table2 td {
         width:300px;
         height:100px;
         border:solid 1px #000;
         text-align:center;
    }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function hideShow(num,id1,id2) {
    
    if(document.forms[0][num].checked==true) {
       document.forms[0][num].checked=false;
       document.getElementById(id1).style.display="none";
       document.getElementById(id2).style.display="block";
      }
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <form action="#">
    <div>
    <input type="radio" checked="checked" onclick="hideShow(1,'table2','table1')"/>
    <label> : table one</label>
    </div>
    <div>
    <input type="radio" onclick="hideShow(0,'table1','table2')"/>
    <label> : table one</label>
    </div>
    </form>
    
    <table id="table1"><tr>
    <td>this is table one</td>
    </tr></table>
    
    <table id="table2"><tr>
    <td>this is table two</td>
    </tr></table>
    
    </body>
    </html>
    coothead

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    First, thank you for your qucik response, I copy your code and test it out, it works when I first load it, but if I try to click again on any radio button , it won't let me, I am working on a search page, for example, the user can click on radio 1 or radio 2 anytime, and base on their action, the different table will display. YOur sample just let me swicth one time, after that it stay no change.
    Thnks for any further help.
    Regards,

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hello Codehead

    i have modified your script a bid and i got it to switch between clicking radio button, the only problem is the radio button is not checked when I click on it. It is only checked for the first time it load the form.

    here is the code that i modified, please help if you know how to get the check (green hightlight) inside the radio button: THANKS SO MUCH
    REGARDS,

    <script type="text/javascript">
    //<![CDATA[

    function hideShow(num,id1,id2) {

    if(document.forms[0][num].checked==true)
    {
    document.forms[0][num].checked=false;
    document.getElementById(id1).style.display="none";
    document.getElementById(id2).style.display="block";
    }
    else if (document.forms[0][num].checked==false) {
    document.forms[0][num].checked=false;
    document.getElementById(id1).style.display="none";
    document.getElementById(id2).style.display="block";
    }
    }

    //]]>
    </script>

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the line directly under else if is:
    document.forms[0][num].checked=false;
    it should probably be
    document.forms[0][num].checked=true;

  6. #6
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    still having problem with the checked radio thanks

    I have change the statement after else if to true but still not doing properly, please help if you could. Here is the code:
    Regards

    <html>
    <head>
    <style type="text/css">
    /*<![CDATA[*/

    #table1{
    width:200px;
    border:solid 1px #000;
    }
    #table1 td {
    width:200px;
    border:solid 0px #000;
    text-align:left;
    }
    #table2 {
    width:200px;
    border:solid 1px #000;
    display:none;
    }
    #table2 td {
    width:200px;
    height:100px;
    border:solid 0px #000;
    text-align:left;
    }

    /*//]]>*/
    </style>


    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function testResults (form) {
    var TestVar = form.inputbox.value;
    form.Where.value = TestVar;
    }
    function pasteText(obj) {
    theForm.Where.value = obj;
    }

    function hideShow(num,id1,id2) {

    if(document.forms[0][num].checked==true)
    {
    document.forms[0][num].checked=false;
    document.getElementById(id1).style.display="none";
    document.getElementById(id2).style.display="block";
    }
    else if (document.forms[0][num].checked==false) {
    document.forms[0][num].checked=true;
    document.getElementById(id1).style.display="none";
    document.getElementById(id2).style.display="block";
    }
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <form action="#">
    <div>
    <input type="radio" checked onclick="hideShow(1,'table2','table1')"/>
    table one
    </div>
    <div>
    <input type="radio" onclick="hideShow(0,'table1','table2')"/>
    <label> : table two</label>
    </form>
    <table id="table1">
    <tr>
    <td>
    <div><small><a href="#" onclick="pasteText('and');">and</a></small></div>
    <div><small><a href="#" onclick="pasteText('or');">or</small></div>
    <div><small><a href="#" onclick="pasteText('w/N');">w/N</small></div>
    <div><small><a href="#" onclick="pasteText('not w/N');">not w/N</small></div>
    <div><a href="#" onclick="pasteText('pre /N');">pre /N</small></div>
    <div><small><a href="#" onclick="pasteText('w /p');">w /p</small></div>
    <div><small><a href="#" onclick="pasteText('not w/p');">not w/p</small></div>
    <div><small><a href="#" onclick="pasteText('pre /N');">pre /N</small></div>
    <div><small><a href="#" onclick="pasteText('w/seg');">w/seg</small></div>
    <div><small><a href="#" onclick="pasteText('not w/seg');">not w/seg</small></div>
    <div><small><a href="#" onclick="pasteText('not w/seg');">w/s</small></div>
    <div><small><a href="#" onclick="pasteText('not w/s');">not w/s</small></div>
    <div><small><a href="#" onclick="pasteText('and not');">and not</small></div>

    </td>
    </tr>
    </table>
    <table id="table2">
    <tr>
    <td>
    <div><small><a href="#" onclick="pasteText('and');">and</a></small></div>
    <div><small><a href="#" onclick="pasteText('and not');">and not</small></div>
    <div><small><a href="#" onclick="pasteText('or');">or</small></div>
    <div><small><a href="#" onclick="pasteText('within');">within</small></div>
    </td>
    </tr>
    </table>
    </body>
    </html>

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works:
    Code:
    <html>
    <head>
    <style type="text/css">
    /*<![CDATA[*/
    
    #table1{
    width:200px;
    border:solid 1px #000;
    }
    #table1 td {
    width:200px;
    border:solid 0px #000;
    text-align:left;
    }
    #table2 {
    width:200px;
    border:solid 1px #000;
    display:none;
    }
    #table2 td {
    width:200px;
    height:100px;
    border:solid 0px #000;
    text-align:left;
    }
    
    /*//]]>*/
    </style>
    
    
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function testResults (form) {
    var TestVar = form.inputbox.value;
    form.Where.value = TestVar;
    }
    function pasteText(obj) {
    theForm.Where.value = obj;
    }
    
    function hideShow() {
    if( document.getElementById("rad1").checked ) {
    	document.getElementById("table1").style.display="block";
    	document.getElementById("table2").style.display="none";
    } else {
    	document.getElementById("table2").style.display="block";
    	document.getElementById("table1").style.display="none";
    }
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <form action="#">
    <div>
    <input type="radio" id="rad1" name="rad" checked onclick="hideShow()"/>
    table one
    </div>
    <div>
    <input type="radio" id="rad2" name="rad" onclick="hideShow()"/>
    <label> : table two</label>
    </form>
    <table id="table1">
    <tr>
    <td>
    <div><small><a href="#" onclick="pasteText('and');">and</a></small></div>
    <div><small><a href="#" onclick="pasteText('or');">or</small></div>
    <div><small><a href="#" onclick="pasteText('w/N');">w/N</small></div>
    <div><small><a href="#" onclick="pasteText('not w/N');">not w/N</small></div>
    <div><a href="#" onclick="pasteText('pre /N');">pre /N</small></div>
    <div><small><a href="#" onclick="pasteText('w /p');">w /p</small></div>
    <div><small><a href="#" onclick="pasteText('not w/p');">not w/p</small></div>
    <div><small><a href="#" onclick="pasteText('pre /N');">pre /N</small></div>
    <div><small><a href="#" onclick="pasteText('w/seg');">w/seg</small></div>
    <div><small><a href="#" onclick="pasteText('not w/seg');">not w/seg</small></div>
    <div><small><a href="#" onclick="pasteText('not w/seg');">w/s</small></div>
    <div><small><a href="#" onclick="pasteText('not w/s');">not w/s</small></div>
    <div><small><a href="#" onclick="pasteText('and not');">and not</small></div>
    
    </td>
    </tr>
    </table>
    <table id="table2">
    <tr>
    <td>
    <div><small><a href="#" onclick="pasteText('and');">and</a></small></div>
    <div><small><a href="#" onclick="pasteText('and not');">and not</small></div>
    <div><small><a href="#" onclick="pasteText('or');">or</small></div>
    <div><small><a href="#" onclick="pasteText('within');">within</small></div>
    </td>
    </tr>
    </table>
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thank you so much for the help JimFraser!!

    I am really appreciated your input and help. Sure it works.
    Regards


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
  •