asked on

Show/Hide table, rows and columns via checkbox and radio button

I'm having problems making this script work. Basically, I need to show a table when the checkbox is checked, and, depending on what radio button is selected from the second table, show or hide a column. Any ideas? Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head>
<script language="JavaScript" type="text/javascript">
function checkTab(theTab)
{
f=document.setup;
if(f.recurrence_check.checked==true) {
document.getElementByID("recurrence_table").style.display="";
} else {
document.getElementByID("recurrence_table").style.display="none";
}
if(f.recurrence_type[0].checked) {
document.getElementById("daily").style.display="";
document.getElementById("weekly").style.display="none";
document.getElementById("recurrence_stop").style.display="";
}
if(f.recurrence_type[1].checked) {
document.getElementById("daily").style.display="none";
document.getElementById("weekly").style.display="";
document.getElementById("recurrence_stop").style.display="";
}
}
</script>
</head>

<body>
<table onClick="checkTab(this)" border=1>
<tr><th rowspan=2>Recurrence</th>
<td><input type="checkbox" id="recurrence_check" name="recurrence_check" value="1">Add Recurrence</td>
<tr><td>
      <table border="1" id="recurrence_table" style="none">
      <tr><td>
      <input type="radio" name="recurrence_type" value="1" >Daily<br>
      <input type="radio" name="recurrence_type" value="2" >Weekly<br>
      </td>

      <td id="daily" style="display:none">
      <input type="radio" name="daily" value="1" >Every day<br>
      <input type="radio" name="daily" value="2">Every weekday<br>
      </td>

      <td id=weekly style="display:none">
      <input type="checkbox" name="weekly[]" value="1" />Monday <br />
      <input type="checkbox" name="weekly[]" value="2" />Tuesday <br />
      <input type="checkbox" name="weekly[]" value="3" />Wednesday <br />
      <input type="checkbox" name="weekly[]" value="4" />Thursday <br />
      <input type="checkbox" name="weekly[]" value="5" />Friday <br />
      </td>

      <td id="recurrence_stop" style="display:none">Date to stop recurrence:<br />
      <input type="textbox" name="recurrence_stop" />
      </td></tr></table>
</td></tr></table>

ASKER CERTIFIED SOLUTION

Roonaan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Lia Nungaray

ASKER

Thank you for the quick response Roonan. You are right, adding the form tag fixes the issue, but not completely. When I load the page, the recurrence table still shows. It is hidden only after I check and then uncheck the checkbox.

Roonaan

That's because style="none" should be style="display:none" I suppose.

-r-

Lia Nungaray

ASKER

You supposed right! Thanks!