Link to home
Start Free TrialLog in
Avatar of LuigiC
LuigiC

asked on

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
ASKER CERTIFIED SOLUTION
Avatar of sathishv
sathishv
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of LuigiC
LuigiC

ASKER

Hey thanks for this

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

Cheers

Luigi
Avatar of Binylkumar
Binylkumar
Flag of India image
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
Avatar of sathishv
sathishv
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"