• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 610
  • Last Modified:

show hide tables in a form

Hi

I've got three radio buttons on a form - r1, r2 and r3

I have three tables in that form - t1, t2, t3

All tables are hidden when the form is open, just the radio buttons are visible.

When a radio button is pressed, the corresponding table and all its contents must be shown

Cheers

Luigi
0
LuigiC
Asked:
LuigiC
  • 2
1 Solution
 
sathishvCommented:
Define an onclick event for the radio buttons and use the function to show or hide the tables like this:

<input type=radio name=r1 onclick='showTable("t1")'>T1
<input type=radio name=r1 onclick='showTable("t2")'>T2
<input type=radio name=r1 onclick='showTable("t3")'>T3


function showTable(tableId) {
  //first hide all the tables so that only one table is visible at any time
  document.getElementById("t1").style.display="none";
  document.getElementById("t2").style.display="none";
  document.getElementById("t3").style.display="none";

  document.getElementById(tableId).style.display="block";
}

You can do a lot of variations on this, like doing a if else on the radio buttons so that you don't have to pass the table ID and so on. But I guess you get the basic idea using this example.
0
 
LuigiCAuthor Commented:
Hey thanks for this

Everything's sweet 'cept I would like all tables to be hidden when the page first loads

Cheers

Luigi
0
 
BinylkumarCommented:
Hai try this,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
function showTable(tableId) {
  //first hide all the tables so that only one table is visible at any time
  document.getElementById("t1").style.display="none";
  document.getElementById("t2").style.display="none";
  document.getElementById("t3").style.display="none";

  document.getElementById(tableId).style.display="block";
}
function hideTable(tableIda,tableIdb,tableIdc) {
      var a = tableIda;
      var b = tableIdb;
      var c = tableIdc;
      document.getElementById(a).style.display="none";
      document.getElementById(b).style.display="none";
      document.getElementById(c).style.display="none";
}
</script>
</head>

<body onLoad=hideTable('t1','t2','t3')>
<table width="100%"  border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="100%"  border="1" cellpadding="0" cellspacing="0" bgcolor="#999966" id="t1" name="t1">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td><table width="100%"  border="1" cellpadding="0" cellspacing="0" bgcolor="#99CC99" id="t2" name="t2">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td><table width="100%"  border="1" cellpadding="0" cellspacing="0" bgcolor="#CC9999" id="t3" name="t3">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
  <td colspan="3">
      <input type=radio name=r1 onclick='showTable("t1")'>T1
      <input type=radio name=r1 onclick='showTable("t2")'>T2
      <input type=radio name=r1 onclick='showTable("t3")'>T3

  </td>
 
  </tr>
</table>



</body>
</html>

bye
binylkumar
0
 
sathishvCommented:
Just put a add display:none in the table tags:

<table style="display:none">

or if you want it done dynamically put this in the onload event of the page

document.getElementById("t1").style.display = "none"
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now