Interactive Forms

by Brian Zimmer

Why interactive forms?

Forms are easy enough to create when they are simple, like
search boxes. But what if you need them to be complex? How
about changing the forms based on input by the viewer? This
is where interactive forms using Javascript and HTML can
help. I'll use a simple example on how interactive forms can
be useful.

The problem

I am going to use a business project as an example to teach
interactive forms. Imagine that we are creating a ordering
system for flowers. We would like the customer to be able to
order a bouquet of flowers. The customer can choose to have
any number of flowers in the bouqet from 1 to 6. For each
flower, the customer can choose a type of flower, and there
are 3 different kinds of flowers. Now imagine all these
options as a regular form. There would be 18 options to
choose from, even if you only wanted one flower! This would
be ugly! In this tutorial we will learn how we can show and
hide form elements depending on the input by the customer.
Now let's get started!

Creating the interactive form
-HTML

We are going to create a page where you can enter the
information for ordering flowers. We've decided on having a
drop down menu to select the number of flowers, and then for
the number selected, display that number of options to
choose the type of flower. We'll start by creating the HTML
forms. First we will write the html code for the form.

<select id='numflowers'>
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5
<option value='6'>6 </select>

This will create a menu.

Next we need to create the form where the customer will
choose the type of flower they would like. We will let them
choose between a red rose, a white rose, and a yellow rose.
I am going to use radio buttons for the selection. Here is
the code:

<input type="radio" name="color1" value="red">Red

<input type="radio" name="color1" value="white">White

<input type="radio" name="color1" value="yellow">Yellow


For this tutorial, I assume you have a basic knowledge of
HTML. All of these pages still need mandatory tags, but I
left them out because of the size they would take up. Notice
how I made all the options the same name. This is so they
are grouped together, and only one option can be choosen.

This is what it will look like: 0 Red 0 White 0 Yellow

Duplicate this code 6 times, for each of the flower. But
every time you see "color1", change that to a different name
so they are all seperate. I will use "color1", "color2",
"color3", and so on.

Now we need to put all of this together into an ordering
form. But we need to add something so that the forms can
disappear. We will add <div> tags around each of the flower
type selection rows. Enter the following code around each of
the groups of options. Make sure that for each one, you
label the id tag for the <div> differently. For example, the
first group will start with <div id="divColor1", the second
will start with <div id="divColor2", and so on. THIS IS
IMPORTANT. When we pass variables onto the script, the only
thing that should change between the name of the <div> tags
should be the number. This is because we will use a loop to
go through all the numbers. We will pass through the name of
the <div> tags to the javascript script, and the script will
add the numbers.

<div id='divColor1' style="display: none;">
Choose type of flower 1:


<input type="radio" name="color1" value="red">Red

<input type="radio" name="color1" value="white">White
<input type="radio"
name="color1" value="yellow">Yellow
</div>

Now we have each option groups surrounded by a <div> tag.
This will allow us to change their visibility with
javascript. I have put <div> tags around the options, and
added a submit button. Note: when adding <div> tags inside a
table, make sure they are contained within a <td> cell.
Something like <table><div><tr><td>< d>< r></div>< able>
will not work for the same reason that adding text outside
of <td> cells inside a table doesn't work. If the stuff
inside the <div> tag is showing up, tables may be your
problem. To fix this, either don't use tables, or create an
entire seperate table for the information inside the <div>
tag. Here is the code:

<h3>Flower Order Form</h3>
<form action="processorder.php" method="post">
Select how many flowers you would like:

<select id='numflowers'>
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5

</select>

<div id='divColor1' style="display: none;">
Choose type of flower 1:


<input type="radio" name="color1" value="red">Red

<input type="radio" name="color1" value="white">White

<input type="radio" name="color1" value="yellow">Yellow

</div>

<div id='divColor2' style="display: none;">
Choose type of flower 2:


<input type="radio" name="color2" value="red">Red

<input type="radio" name="color2" value="white">White

<input type="radio" name="color2" value="yellow">Yellow

</div>

<div id='divColor3' style="display: none;">
Choose type of flower 3:


<input type="radio" name="color3" value="red">Red

<input type="radio" name="color3" value="white">White

<input type="radio" name="color3" value="yellow">Yellow

</div>

<div id='divColor4' style="display: none;">
Choose type of flower 4:


<input type="radio" name="color4" value="red">Red

<input type="radio" name="color4" value="white">White

<input type="radio" name="color4" value="yellow">Yellow

</div>

<div id='divColor5' style="display: none;">
Choose type of flower 5:


<input type="radio" name="color5" value="red">Red

<input type="radio" name="color5" value="white">White

<input type="radio" name="color5" value="yellow">Yellow

</div>

<div id='divColor6' style="display: none;">
Choose type of flower 6:


<input type="radio" name="color6" value="red">Red

<input type="radio" name="color6" value="white">White

<input type="radio" name="color6" value="yellow">Yellow

</div>



<input type="submit" value="Next Step">
</form>

We used css to hide the <div> tags. The next step is to use
javascript to show and hide each of the <div> cells
depending on what is selected in the drop down menu. We will
start out by making a javascript function, then I will
explain the code and link it up with the drop down menu.
Javascript

We are going to create a function that will show and hide
the <div> cells. There are 3 things we need to pass onto the
script: the number of total options, the name prefix for the
<div> tags, and the number of options(to end the loop). Here
is the script that I wrote:

<script language="JavaScript">
function ShowMenu(num, menu, max)
{
//starting at one, loop through until the number chosen
by the user
for(i = 1; i <= num; i++){
//add number onto end of menu
var menu2 = menu + i;
//change visibility to block, or 'visible'
document.getElementById(menu2).style.display
= 'block';
}
//make a number one more than the number inputed
var num2 = num;
num2++;
//hide menus if the viewer selects a number lower
/ his will hide every number between the selected number
// and the maximum
//ex. if 3 is selected, hide the <div> cells for 4, 5,
//and 6
//loop until max is reached
while(num2 <= max){
var menu3 = menu + num2;
//hide
document.getElementById(menu3).style.display = 'none';
//add one to loop
num2=num2+1;
}
}
</script>

Add this code inside the <head> section of your page. Now we
have one less step; to call the function from the drop down
box. Here is the code to do that:

ShowMenu(document.getElementById('numflowers').value,'divCo
<select id='numflowers' onChange="javscript: lor', 6);">
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5
<option value='6'>6

</select>

What this does is when the value is change, it will pass on
the value, the name prefix of the <div> cells, and the
number of <div> cells. In the first part, make sure the
getElementById('numflowers') matches the 'id' attribute in
the <select> tag.

That's it! You can use this javascript function for
anything, the only things you have to change are the name
prefixes and number of <div> cells, and the id of the select
tag. Using onChange, you can use a group of radio buttons or
a checkbox instead.

Here is the final code:
<html>
<head>
<title>Flower Order Form< itle>
<script>
function ShowMenu(num, menu, max)
{
//starting at one, loop through until the number
//chosen by the user
for(i = 1; i <= num; i++){
//add number onto end of menu
var menu2 = menu + i;
//change visibility to block, or 'visible'
document.getElementById(menu2).style.display = 'block';
}
//make a number one more than the number inputed
var num2 = num;
num2++;
//hide it if the viewer selects a number lower
/ his will hide every number between the selected
//number and the maximum
//ex. if 3 is selected, hide the <div> cells for
//4, 5, and 6
//loop until max is reached
while(num2 <= max){
var menu3 = menu + num2;
//hide
document.getElementById(menu3).style.display = 'none';
//add one to loop
num2=num2+1;
}
}
</script>
</head>

<body>
<h3>Flower Order Form</h3>
<form action="processorder.php" method="post">
Select how many flowers you would like:

<select id='numflowers'
onChange="javscript:
ShowMenu(document.getElementById('numflowers').value,
'divColor', 6);">
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5

</select>

<div id='divColor1' style="display: none;">
Choose type of flower 1:


<input type="radio" name="color1" value="red">Red

<input type="radio" name="color1" value="white">White

<input type="radio" name="color1" value="yellow">Yellow

</div>

<div id='divColor2' style="display: none;">
Choose type of flower 2:


<input type="radio" name="color2" value="red">Red

<input type="radio" name="color2" value="white">White

<input type="radio" name="color2" value="yellow">Yellow

</div>

<div id='divColor3' style="display: none;">
Choose type of flower 3:


<input type="radio" name="color3" value="red">Red

<input type="radio" name="color3" value="white">White

<input type="radio" name="color3" value="yellow">Yellow

</div>

<div id='divColor4' style="display: none;">
Choose type of flower 4:


<input type="radio" name="color4" value="red">Red

<input type="radio" name="color4" value="white">White

<input type="radio" name="color4" value="yellow">Yellow

</div>

<div id='divColor5' style="display: none;">
Choose type of flower 5:


<input type="radio" name="color5" value="red">Red

<input type="radio" name="color5" value="white">White

<input type="radio" name="color5" value="yellow">Yellow

</div>

<div id='divColor6' style="display: none;">
Choose type of flower 6:


<input type="radio" name="color6" value="red">Red

<input type="radio" name="color6" value="white">White

<input type="radio" name="color6" value="yellow">Yellow

</div>



<input type="submit" value="Next Step">
</form>

</body>
</html>

Thats all! Have a great day!