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.
<html>
<body>
<h1>Expand Your Form</h1>
<script type="text/javascript" language="JavaScript">
function HidePart(d) { document.getElementById(d).style.display = "none"; }
function ShowPart(d) { document.getElementById(d).style.display = "block"; }
function CheckboxChecked(b,d)
{
if(b) { ShowPart(d); }
else { HidePart(d); }
}
</script>
<form
name="myform"
method="GET"
action="https://www.willmaster.com">
<!-- we'll add form fields later -->
<input
type="submit"
value="Click">
</form>
<script type="text/javascript">
// we'll add code later.
</script>
</body>
</html>
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.
<p> <input type="checkbox" name="mycheckbox" value="yes" onclick="CheckboxChecked(this.checked,'checkboxdiv')"> Check this box if you are married. </p> <div id="checkboxdiv" style="display:none"> <p> Type your spouse's name here:<br /> <input type="text"> </p> </div>
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.
CheckboxChecked(document.myform.mycheckbox.checked,'checkboxdiv');;
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.
<script type="text/javascript"> CheckboxChecked(document.myform.mycheckbox.checked,'checkboxdiv'); </script>
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.
<html>
<body>
<h1>Expand Your Form</h1>
<script type="text/javascript" language="JavaScript">
function HidePart(d) { document.getElementById(d).style.display = "none"; }
function ShowPart(d) { document.getElementById(d).style.display = "block"; }
function CheckboxChecked(b,d)
{
if(b) { ShowPart(d); }
else { HidePart(d); }
}
</script>
<form
name="myform"
method="GET"
action="https://www.willmaster.com">
<p>
<input
type="checkbox"
name="mycheckbox"
value="yes"
onclick="CheckboxChecked(this.checked,'checkboxdiv')">
Check this box if you are married.
</p>
<div id="checkboxdiv" style="display:none">
<p>
Type your spouse's name here:<br />
<input type="text">
</p>
</div>
<input
type="submit"
value="Click">
</form>
<script type="text/javascript">
CheckboxChecked(document.myform.mycheckbox.checked,'checkboxdiv');
</script>
</body>
</html>
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
