javascripts
 

SimplytheBest
Scripts

ASP scripts
PERL scripts
PHP scripts
JavaScripts & Ajax
Snippets
Online scripts

Ajax, DHTML
& JavaScripts

Animation
Background
Bookmarks
Buttons
Calculators
Cookies
Data handling
E-mail
Enhancements
Forms
Image rotation
Menus
Messages
Miscellaneous
Music
Password protection
Redirection
Scrollers
Tables
Time & date
Windows

Publishers
Add script
Account login
Publisher list



 

Home > Scripts > DHTML scripts & JavaScripts > Forms > Show / hide form elements

 

Show / hide form elements script

AUTHOR: JS-Examples
TYPE: Freeware
BROWSERS: IE 4+, IE 6+, NS 4+

This script shows how to create a form that has a portion of the form shown (or hidden) upon certain user events (radio button selection by the user in this example).


EXAMPLE

Type 1 Visible Hidden
Type 2 Visible Hidden
Type 1 Input:
Type 2 Input:


1)
Insert this script in the <HEAD>, between <HEAD> and <BODY> or in the <BODY> section of the page.

then copy (CTRL-C) & paste (CTRL-V)

2) Insert the onClick tags for the checkboxes inside your form as follows:

<form>
Visible <input name="r1" type="radio" checked value="" onClick="toggleT('divt1','s')">
Hidden <input name="r1" type="radio" value="" onClick="toggleT('divt1','h')">
</form>

copy (CTRL-C) & paste (CTRL-V)

copy (CTRL-C) & paste (CTRL-V)

3) Insert the portion of the form you wish to show/hide inside the <span> </span> as follows:

<span id="divt1" style="visibility:visible;position:relative;top:0;left:0">
<form>
....
</form>
</span>


[BACK] [TOP]

 


Copyright © 1997-2009 SimplytheBest Inc. Terms of Use and Legal Disclaimer.
All copyrights are acknowledged. All rights reserved.