Log in

View Full Version : Show table on radio button click.


eesyboi
02-14-2012, 12:21 PM
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


<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;
}
keyboard
02-17-2012, 02:06 AM
This code makes the table appear/dissappear



<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?