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

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>
0
horalia
Asked:
horalia
  • 2
  • 2
1 Solution
 
RoonaanCommented:
horalia,

I think you forgot a form tag, and made a casing typo on getElementByID (should be getElementById).
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head>
<script language="JavaScript" type="text/javascript">
function checkTab(theTab)
{
  f = document.forms['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>
<form name="setup">
<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

      <input type="checkbox" name="weekly[]" value="2" />Tuesday

      <input type="checkbox" name="weekly[]" value="3" />Wednesday

      <input type="checkbox" name="weekly[]" value="4" />Thursday

      <input type="checkbox" name="weekly[]" value="5" />Friday

      </td>

      <td id="recurrence_stop" style="display:none">Date to stop recurrence:

      <input type="textbox" name="recurrence_stop" />
      </td></tr></table>
</td></tr></table>
</form>

Kind regards,

-r-
0
 
horaliaAuthor Commented:
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.
0
 
RoonaanCommented:
That's because style="none" should be style="display:none" I suppose.

-r-
0
 
horaliaAuthor Commented:
You supposed right! Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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