INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS
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
- Automated Signatures
On Your Posts
- Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.
Partner With Us!
"Best Of Breed" Forums Add Stickiness To Your Site
(Download This Button Today!)
"...Thanks for creating this site - I expect to be visiting it often as I continue to try to grow my bag of tricks!..."
Where in the world do Tek-Tips members come from?
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:
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;'>
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:
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
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:
- Talk To Other Members
- Notification Of Responses To Questions
- Favorite Forums One Click Access
- Keyword Search Of All Posts, And More...
Register now while it's still free!
Already a member? Close this window and log in.
Join Us Close