Results 1 to 2 of 2

Thread: Show table on radio button click.

  1. #1
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Show table on radio button click.

    I am trying to display some form elements inside a table on radio button click. there are two radio button, i would like the form elements to be hidden on default and visable when the second radio button is clicked. So far this is what have done but the problem is, it doesn't display all the form fields in the table, it only displays the first two lines and ignores the rest, a table without id=paymethod. Here's the code

    Code:
    <script type = "text/javascript">
    function showTable(which) {
    if (which == 2) {
    document.getElementById("paymethod").style.display ="table";
    }
    else {
    document.getElementById("paymethod").style.display ="none";
    }
    }
    </script>
    
    <input type="radio" name="paymentmethod" class="type style1" value="cod" id="paymentmethod_0" onclick = "showTable(1)">
     <input type="radio" name="paymentmethod" class="type style1" value="cdcp" id="paymentmethod_1" onclick = "showTable(2)">
    
    <table width="700" border="0" cellpadding="5" id="paymethod">
    this has 6 rows and 2 column
    </table>
    
    #paymethod {
    width: 700px;
    border: 0px solid;
    font-family: "Century Gothic";
    font-size: 14px;
    display:none;
    }

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    This code makes the table appear/dissappear

    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function showTable(which) 
    {
    	if(which == "1") {
    	document.getElementById('paymethod').style.display = "table";
    	}
    	if(which == "2") {
    	document.getElementById('paymethod').style.display = "none";
    	}
    }
    //-->
    </script>
    <style type="text/css">
    #paymethod {
    width: 700px;
    border: 0px solid;
    font-family: "Century Gothic";
    font-size: 14px;
    }
    </style>
    </head>
    <body>
    Unhide<input type="radio" onClick="showTable('1')" id="paymentmethod_0" />
    <br />
    Hide<input type="radio" onClick="showTable('2')" id="paymentmethod_1" />
    <table width="700" border="0" cellpadding="5" id="paymethod">
    <tr>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    </tr>
    <tr>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    <td>
    this has 6 rows and 2 column
    </td>
    </tr>
    </table>
    </body>
    </html>
    Is that what you wanted?
    Last edited by keyboard; 02-17-2012 at 01:55 AM.

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
  •