Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • 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!
  • Students Click Here

*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.

Students Click Here




How to Show/Hide form fields whenever I select/unselect a checkbox? by medic
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";
      document.getElementById("hideablearea").style.visibility = "hidden";

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
  <div id='hideablearea' style='visibility:hidden;'>
    <input type='text'><br>
    <input type='submit'>
  This is a text line below the hideable form fields.<br>

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";
      document.getElementById("hideablearea").style.display = "none";

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