SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Kentucky
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alter Page with onClick()?

    1st post here at Sitepoint.

    I need to display some addition html within a form when a checkbox is clicked. I know nothing about javascript but am pretty sure we can do it.

    Here is what the code will look like if the box is NOT checked:
    HTML Code:
    <tr><td><input type="checkbox" name="name1" value="yes"> Check Me!</td><td>&nbsp;</td></tr>
    However when the box is checked, I want some additional HTML to show, like this:
    HTML Code:
    <tr><td><input type="checkbox" name="name1" value="yes"> Check Me!</td><td><input type="text" value=""> Text Box Here!</td></tr>
    Basically, when the checkbox is clicked, I want a text area to appear.

    Thanks,
    Scott Z.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    HTML Code:
    <tr><td><input type="checkbox" name="name1" value="yes" onclick="toggle(this);"> Check Me!</td><td><div id="hiddenInput" style="display: none;"><input type="text" value=""> Text Box Here!</div></td></tr>  
    Code:
    function toggle(c)
    {
      if (c.checked) 
      {
        document.getElementById("hiddenInput").style.display = '';
      } 
      else 
      {
        document.getElementById("hiddenInput").style.display = 'none';
      }
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Kentucky
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful, thank you very much!

    Now for the next piece, how can I make this work with several checkboxes on one page in a column. If selected, I need a different piece of HTML to show in the column next to them. Do I have to layout this function for each of them and change the name of ("hiddenInput") for each?

    Thanks again, this is exactly what I need!

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Kentucky
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I also found this which works with multiple checkboxes but there is a problem with it:

    HTML Code:
    <html>
    <head>
    <script language="JavaScript" type="text/javascript">
    function toggle( targetId ){
      if (document.getElementById){
    		target = document.getElementById( targetId );
    		   if (target.style.visibility == "visible"){
    			  target.style.visibility = "hidden";
    		   } else {
    			  target.style.visibility = "visible";
    		   }
    	 }
    }
    </script>
    </head>
    <body>
    <table>
    <tr><td><input type="checkbox" name="name1" value="yes" id="toggle0" onclick="toggle('alk');"> Check Me!</td><td id="alk"><input type="text" value=""> Text Box Here!</td></tr>
    <tr><td><input type="checkbox" name="name2" value="yes" onclick="toggle('ammo');"> Check Me!</td><td><div id="ammo"><input type="text" value=""> 1Text Box Here!</div></td></tr>
    </table>
    </body>
    </html>
    The problem with this is when the page is first loaded, all elements show. However when you check and then uncheck the box, it works fine.
    http://www.reefland.com/test.html

    Scott Z.


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
  •