SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding/unhiding a table using a checkbox, help needed!

    Hi,

    I am trying to do a simple piece of java code that hides/unhides a table based on a checkbox, i did the code below but when clicking on the checkbox i get the error 'show_hide is not a function' being a newbie i can not think what i have done wrong, can somebody please point me in the right direction?

    Code:
    <html>
    <head>
    <SCRIPT language=JavaScript type=text/JavaScript>
    <!--
    function show_hide() {
      for (i=0; i<4; i++) {
        if (document.forms.show_hide.checked == false)  {
    document.getElementById("shipping_row_" + i).style.display = "";
        } else {
          document.getElementById("shipping_row_" + i).style.display = "none";
        }
      }
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <form name="form1" method="post" action="">
      <p>
        <INPUT id=show_hide onclick="show_hide()" type=checkbox CHECKED value=no
    name=show_hide> 
    Untick to make fields appear </p>
      <table width="500" border="0" cellspacing="4" cellpadding="0">
        <tr id=shipping_row_0 >
          <td width="127">Name</td>
          <td width="373"><input type="text" name="textfield"></td>
        </tr>
        <tr id=shipping_row_1>
          <td>Address</td>
          <td><input type="text" name="textfield"></td>
        </tr>
        <tr id=shipping_row_2>
          <td>Post Code</td>
          <td><input type="text" name="textfield"></td>
        </tr>
        <tr id=shipping_row_3>
          <td>Email Address </td>
          <td><input type="text" name="textfield"></td>
        </tr>
        <tr id=shipping_row_4>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <p>&nbsp;</p>
    </form>
    </body>
    </html>
    Last edited by blendmedia; Nov 10, 2005 at 12:47. Reason: Spelling mistakes, doh!

  2. #2
    SitePoint Addict
    Join Date
    Nov 2005
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try giving the button a different ID and name. Your button has the same ID and name as the function name. Also, you really should put quotes around every attribute value in your HTML tags.

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the quick response! that did the trick nicely.

    I have added <body onload="show_hide();"> and everything is working just how i wanted.

    Cheers


    The working version for posterity
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <SCRIPT language=JavaScript type=text/JavaScript>
    <!--
    function show_hide() {
      for (i=0; i<4; i++) {
        if (document.forms[0].showhide.checked == false)  {
    document.getElementById("shipping_row_" + i).style.display = "";
        } else {
          document.getElementById("shipping_row_" + i).style.display = "none";
        }
      }
    }
    //-->
    </SCRIPT>
    </head>
    <body onload="show_hide();">
    
    <form name="form1" method="post" action="">
      <p>
        <INPUT id="showhide" onclick="show_hide()" type="checkbox" CHECKED value="no"
    name="showhide"> 
    Untick to make fields appear </p>
      <table width="500" border="0" cellspacing="4" cellpadding="0">
        <tr id="shipping_row_0">
          <td width="127">Name</td>
          <td width="373"><input type="text" name="textfield"></td>
        </tr>
        <tr id="shipping_row_1">
          <td>Address</td>
          <td><input type="text" name="textfield"></td>
        </tr>
        <tr id="shipping_row_2">
          <td>Post Code</td>
          <td><input type="text" name="textfield"></td>
        </tr>
        <tr id="shipping_row_3">
          <td>Email Address </td>
          <td><input type="text" name="textfield"></td>
        </tr>
        <tr id="shipping_row_4">
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <p>&nbsp;</p>
    </form>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •