Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.
Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

HTML, XHTML & CSS FAQ

Forms

How to Show/Hide form fields whenever I select/unselect a checkbox?
Posted: 15 Dec 03 (Edited 15 Dec 03)

Try these code samples:
1) Make an HTML page and place this script inside the HEAD tag:

<script language="JavaScript">
  function showhidefield()
  {
    if (document.frm.chkbox.checked)
    {
      document.getElementById("hideablearea").style.visibility = "visible";
    }
    else
    {
      document.getElementById("hideablearea").style.visibility = "hidden";
    }
  }
</script>

2) Put the following code inside the BODY tag:

 <form name='frm' action='nextpage.asp'>
  <input type="checkbox" name="chkbox" onclick="showhidefield()">
  Check/uncheck here to show/hide the other form fields
  <br>
  <div id='hideablearea' style='visibility:hidden;'>
    <input type='text'><br>
    <input type='submit'>
  </div>
  This is a text line below the hideable form fields.<br>
</form>

All items inside the DIV tags appear/disappear as you select/unselect the checkbox.
Notice that the line of text below the hideable area stays on the same place whether the
checbox is selected or unselected.

Now, what if we want everything below the hideable area move up to fill-in the gap or unused space
when the area is hidden? Very simple. We just have to make a few changes in our HTML sample:

1) Change some portions of the javascript to make it look like this:

<script language="JavaScript">
  function showhidefield()
  {
    if (document.frm.chkbox.checked)
    {
      document.getElementById("hideablearea").style.display = "block";
    }
    else
    {
      document.getElementById("hideablearea").style.display = "none";
    }
  }
</script>


2) Now, replace the style attribute of the DIV tag with style='display:none'.
Test your modified HTML.
Notice that all items below the hideable area move up to fill-in that gap left by the area when it is hidden.

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close