Expand Your Form
Sometimes, a form has sections that apply to only certain
users. It may be useful and more user-friendly to make those
portions of your form appear only when needed.
This tutorial describes how to accomplish that with a checkbox.
As an example, if the form user is married, you want to
collect information about the spouse. If unmarried, the
section of the form asking for that information is hidden
from the user.
When the "married" checkbox is checked, the section of the
form asking for information about the spouse is displayed.
When unchecked, the spousal information section is hidden
This article will teach you how to use CSS and JavaScript to
display certain information only if your form user needs to
see it. The information is displayed or hidden depending on
whether or not a checkbox is checked.
Let's get started.
Open a plain text processor like NotePad or TextWrangler.
Also, open a web browser to test the form. You now have two
windows open.
Getting Started, Step 1
The first step is to copy the following source code and
paste it into your plain text processor.
Save the above to your hard drive with a .html file name
extension. Let's name the file example.html
Getting Started, Step 2
Drag the example.html file into your browser. At this point,
you'll see only a title and a "click" button in the browser
window.
The Setup
You now have two windows open, the text processor to work
with the source code and the browser to display the page.
Following are step-by-step instructions for making a section
of the form display/hide depending on whether or not a
checkbox is checked. Do the steps in the text processor as
we go along and reload the browser to view the results.
In the example.html source code (the file in your text
processor) the block of JavaScript code above the form
is okay as is.
You'll add fields to the form. And you'll add lines to the
block of JavaScript below the form.
Expanding the Form with a Checkbox
Checkbox, Step 1 —
Put the following between your <form...> and </form> tags.
Save the example.html file and reload the browser.
You'll see a checkbox on your form. When you check the box,
the "spouse name" section of the form displays. When you
uncheck it, "spouse name" hides.
The onclick= attribute in the checkbox input tag causes the
magic to happen. When the checkbox is checked or unchecked,
two items of information are sent to the CheckboxChecked()
function:
-
Whether or not the checkbox is checked, and
-
The id of the div tag containing the "spouse name" section
of the form.
I won't go into detail about how JavaScript works. This
tutorial is for describing how to tie the display of certain
a section of the form to whether or not a checkbox is
checked.
Googling for "JavaScript tutorial" will provide links for
studying how JavaScript works, if you're also interested in
that.
Checkbox, Step 2 —
The second step is to tell the browser to display or not
display the "spouse name" section of the form when the page
is first loaded into the browser. If the checkbox is checked
when the page is loaded, the "spouse name" must display.
Otherwise, it may not.
Between the script tags below the form, add this line.
With the above line, the same two items of information are
sent to function CheckboxChecked() as is sent to it within
the form, except it's done when the page loads instead of
when the checkbox is clicked.
-
Whether or not the checkbox is checked, and
-
The id of the div tag containing the "spouse name" section
of the form.
Notice that the "myform" between two dots is the name of the
form and the "mycheckbox" between two dots is the name of
the checkbox field. The "document.myform.mycheckbox.checked"
consults directly with the form to determine whether or not
the checkbox is checked.
When you insert the above line between the script tags below
the form, you'll end up with.
The checkbox implementation is now done.
Additional checkboxes can be implementated the same way, in
the same form. Simply create a different form section to
display/hide and give it a unique id value. That id is then
used with the new checkbox field.
The Complete Form
Below is the source code of the complete form example. And below that is the live example form to demonstrate how the display/hide works.
Form Fields Available To Your Form Handling Software
All form fields in the form are available to your form
handling software, whether displayed or hidden when
the form was submitted.
When a section of the form is displayed and the user
provides information in that section, then the section is
later hidden, the information provided in that section
is still part of the form. The information is not affected
by whether or not the section is displayed for the user.
Other Display/Hide Trigger Fields.
An extensive tutorial in the
WebSite's Secret members
area describes how to use not only checkboxes to display/hide
sections of a form, but also radio buttons, dropdowns, and
scrolling lists. The
members' area has lots of other goodies, also.
Will Bontrager
©2007 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
