Interactive Forms with Javascript / HTML Tutorial

Display or hide forms based on output of a drop down box

Click here for Spanish Translation

What are forms?

One of the most important aspects of web design is getting information from the viewer to the webmaster. This is where HTML forms are used. If you have been on the internet, you have seen forms before. Google uses them for search queries, Amazon uses them for shipping and credit card information, your bank uses them for you to login. Almost every site on the web has a type of form somewhere. We can't live without forms.

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 bouquet 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 something looking like this:

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<br>
<input type="radio" name="color1" value="white">White<br>
<input type="radio" name="color1" value="yellow">Yellow<br>

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 chosen.

This is what it will look like:
Red
White
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 separate. 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:<br><br>
                <input type="radio" name="color1" value="red">Red<br>
                <input type="radio" name="color1" value="white">White<br>
                <input type="radio" name="color1" value="yellow">Yellow<br>
</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></td></tr></div></table> 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 separate 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:<br><br>
                <input type="radio" name="color1" value="red">Red<br>
                <input type="radio" name="color1" value="white">White<br>
                <input type="radio" name="color1" value="yellow">Yellow<br>
</div>

<div id='divColor2' style="display: none;">
                Choose type of flower 2:<br><br>
                <input type="radio" name="color2" value="red">Red<br>
                <input type="radio" name="color2" value="white">White<br>
                <input type="radio" name="color2" value="yellow">Yellow<br>
</div>

<div id='divColor3' style="display: none;">
                Choose type of flower 3:<br><br>
                <input type="radio" name="color3" value="red">Red<br>
                <input type="radio" name="color3" value="white">White<br>
                <input type="radio" name="color3" value="yellow">Yellow<br>
</div>

<div id='divColor4' style="display: none;">
                Choose type of flower 4:<br><br>
                <input type="radio" name="color4" value="red">Red<br>
                <input type="radio" name="color4" value="white">White<br>
                <input type="radio" name="color4" value="yellow">Yellow<br>
</div>

<div id='divColor5' style="display: none;">
                Choose type of flower 5:<br><br>
                <input type="radio" name="color5" value="red">Red<br>
                <input type="radio" name="color5" value="white">White<br>
                <input type="radio" name="color5" value="yellow">Yellow<br>
</div>

<div id='divColor6' style="display: none;">
                Choose type of flower 6:<br><br>
                <input type="radio" name="color6" value="red">Red<br>
                <input type="radio" name="color6" value="white">White<br>
                <input type="radio" name="color6" value="yellow">Yellow<br>
</div>

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

Here is what it looks like:

Flower Order Form

Select how many flowers you would like:

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
                //this 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:

<select id='numflowers' 
onChange="javascript: 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
	<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 what the finished product looks like:

Flower Order Form

Select how many flowers you would like:

And here is the final code:

<html>
<head>
<title>Flower Order Form</title>
<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
                //this 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="javascript: 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
        <option value='5'>6

</select>


<div id='divColor1' style="display: none;">
                Choose type of flower 1:<br><br>
                <input type="radio" name="color1" value="red">Red<br>
                <input type="radio" name="color1" value="white">White<br>
                <input type="radio" name="color1" value="yellow">Yellow<br>
</div>

<div id='divColor2' style="display: none;">
                Choose type of flower 2:<br><br>
                <input type="radio" name="color2" value="red">Red<br>
                <input type="radio" name="color2" value="white">White<br>
                <input type="radio" name="color2" value="yellow">Yellow<br>
</div>

<div id='divColor3' style="display: none;">
                Choose type of flower 3:<br><br>
                <input type="radio" name="color3" value="red">Red<br>
                <input type="radio" name="color3" value="white">White<br>
                <input type="radio" name="color3" value="yellow">Yellow<br>
</div>

<div id='divColor4' style="display: none;">
                Choose type of flower 4:<br><br>
                <input type="radio" name="color4" value="red">Red<br>
                <input type="radio" name="color4" value="white">White<br>
                <input type="radio" name="color4" value="yellow">Yellow<br>
</div>

<div id='divColor5' style="display: none;">
                Choose type of flower 5:<br><br>
                <input type="radio" name="color5" value="red">Red<br>
                <input type="radio" name="color5" value="white">White<br>
                <input type="radio" name="color5" value="yellow">Yellow<br>
</div>

<div id='divColor6' style="display: none;">
                Choose type of flower 6:<br><br>
                <input type="radio" name="color6" value="red">Red<br>
                <input type="radio" name="color6" value="white">White<br>
                <input type="radio" name="color6" value="yellow">Yellow<br>
</div>

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

</body>
</html>

Another Example - Showing only the selected value

This is a simple example that only works for forms where you want all the numbers below the selected value to be displayed (if you select 4, the boxes for 3, 2, and 1 will be shown). In this next part, I am going to alter the script so that only the option you want is selected.

The Problem

Only display the number that is selected. So for example, when "2" is selected from the list, you want the div corresponding to "2" displayed, and everything else hidden.

The Solution

Replace the old javascript code between the script tags with this:

<script>
function ShowMenu(num, menu, max)
{
                //num is selected value, menu is the name of the div, max is the number of divs
                for(i = 1; i <= max; i++){
                        //add number onto end of menu
                        var menu_div = menu + i;

                        //if current show
                        if(i == num) {
                                document.getElementById(menu_div).style.display = 'block';
                        } else {
                                //if not, hide
                                document.getElementById(menu_div).style.display = 'none';
                        }
                }



        }
</script>

Thats all! If you have any questions or comments, you can contact me, or post a comment. Have a great day!

Brian Zimmer is a graphics and web designer with over 4 years of experience in Paint Shop Pro, HTML, CSS, Javascript, SEO, PHP, and MySQL. His services include professional and affordable freelance web and graphic design. He is the webmaster of www.zimmertech.com .


Warning: require(/home/zimmer/zimmertech.com/css/images/404.php): failed to open stream: No such file or directory in /home/zimmer/zimmertech.com/tutorials.php on line 56

Fatal error: require(): Failed opening required '/home/zimmer/zimmertech.com/css/images/404.php' (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/zimmer/zimmertech.com/tutorials.php on line 56