Interactive Forms with Javascript / HTML Tutorial

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

Written by Brian Zimmer
March 15, 2004

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

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

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 .

Rate this Tutorial

Current Rating:

3.98/ 5.00 with 424 votes.

Current Comments

59 comments so far (post your own)

Comments welcome...

Posted by Brian Zimmer (http://www.zimmertech.com)on Monday, 04.19.04 @ 04:23am | #3

Great - just what I was looking for. Thanks

Posted by Karl on Saturday, 04.24.04 @ 01:54am | #11

Hum... I did you do this form? it's awsome :) ...

(i'm talking about the 'Leave your comment:' form)

any tutorial on this?

Posted by nuno on Friday, 05.7.04 @ 02:44pm | #45

by the way, the tutorial is great

i was looking for something that would generate dinamic html code

Posted by nuno on Friday, 05.7.04 @ 02:51pm | #46

Nice tutorial... some small errors in the final code, though.

The selection list to choose the amount of flowers :
<select id='numflowers'
onChange="javscript: (...)

That needs to be 'javAscript', of course. Also, the list allows 5 to be the maximum choice, not 6.

EDIT: Thanks for the heads up! It should be correct now.. -Brian Zimmer

Posted by Ivo on Thursday, 06.17.04 @ 03:44am | #86

WOW ! very nice code

Posted by Sk (ww.sk.com)on Tuesday, 07.13.04 @ 07:08am | #104

This is awesome, it's just what I needed.

Posted by Aj on Thursday, 07.29.04 @ 04:24pm | #121

Hi..
Any tutorial about how to make this "Leave you comment:" form ..?? I need it :) :)

Posted by N. Guntur on Wednesday, 09.29.04 @ 05:13am | #181

yet another plea for a tutorial about the "leave your comment" form...

Posted by ck on Thursday, 10.14.04 @ 04:02am | #189

harlow der... i agree to most people who already commented on yur Leave Your Comment... how do yu do it...??? any tutorial on dis??

Posted by vai on Saturday, 12.4.04 @ 11:48am | #233

good enough

Posted by hackiit on Tuesday, 02.22.05 @ 02:01am | #365

Very good script - clear, good explanation, and allowed me to modify it to do what was necessary. Many Thanks!

Posted by Pran on Wednesday, 03.16.05 @ 04:20pm | #389

that is good script

Posted by nick on Wednesday, 04.6.05 @ 01:41pm | #437

This tutorial is very nice and concise and even works in both IE and Firefor. Good going. It doesn't get any better than this. Thank You

Posted by Ralph Bayer on Wednesday, 04.6.05 @ 06:43pm | #438

Excellent

Posted by Seema on Thursday, 05.26.05 @ 07:20am | #549

how do you make games with this???

Posted by ~~??~~ (http://tyu123454321.tripod.com)on Friday, 06.3.05 @ 05:36pm | #555

hey, thanks heaps! it was just what i was looking for!

Posted by scott on Thursday, 06.9.05 @ 03:21am | #561

why not the following function ?

<code>

function showMenu (selected, id_prepend, max) {
for (n = 1/; n <= max/; n++) {
id = id_prepend + n/;
if (n <= selected) {
document.getElementById (id).style.display = 'block'/;
} else {
document.getElementById (id).style.display = 'none'/;
}
}
}

</code>

no need for 2 loops, no unnessecary mess :)

Posted by Jappie on Monday, 07.25.05 @ 02:43pm | #621

or:

<code>

function showMenu (selected, id_prepend, max) {
for (n = 1/; n <= selected/; n++) {
document.getElementById (id).style.display = 'block'/;
}
for (n = selected + 1/; n <= max/; n++) {
document.getElementById (id).style.display = 'hidden'/;
}
}

</code>

PS: sorry for the missing idents and the / where they don't belong :(

Posted by Jappie on Monday, 07.25.05 @ 02:49pm | #622

haha, and put

id = id_prepend + n/;

before the 2

document.getElementById....

lines of the last example :p

Posted by Jappie on Monday, 07.25.05 @ 02:51pm | #623

Nice tut... very impressed!

just an issue i'm having is that IE blocks the JS? Is there anyway around that. eg. a user clicks a button that 'signs' the js as safe?

regards

Posted by Bubba King on Wednesday, 08.10.05 @ 02:32am | #643

fantastic tut. thanks

Posted by pp on Monday, 08.15.05 @ 04:23am | #655

Very good. Very close to what I'm looking for.
Instead of 'Radio' list, I want to have another drop-down list updated by the selection from first drop-down list.

Thanks.
Michael

Posted by Michael Hwee on Saturday, 09.3.05 @ 10:21pm | #674

Perfect, just what I'd been looking for, thanks!

Posted by Ton on Wednesday, 02.8.06 @ 06:53pm | #826

I have a problem wich I can not solve it ! It sound like: I have a drop down box connected to a table. When I select something from dropdown box (onchange) in a text box should appear the selection, wich is hapening, but also in others text boxes must apear the rest of table content. Ex: I chose a client, on onchange must apear the rest of the information about the client (address, phone, fax, etc ). Something like:
<script>
function functie(s)
{
txt.value =s/;
document.all.sel.options[0].selected=true/;
}
</script>

<?php
$conn = mysql_connect("localhost", "admin") or die(mysql_error())/;
mysql_select_db("facturi",$conn) or die(mysql_error())/;
$get_list = "select id, concat_ws(', ', dencl) as display_name from clienti order by dencl"/;
$get_list_res = mysql_query($get_list) or die(mysql_error())/;
echo "
<select name=selectie onchange=\"functie(this.options[this.options.selectedIndex].value)\" class=\"style1\">
<option value=\"\">--- Selecteaza un client ---</option>
"/;
while ($recs = mysql_fetch_array($get_list_res)) {
$id = $recs['id']/;
$display_name = stripslashes($recs['display_name'])/;
echo "
<option value=\"$display_name\">
$display_name
</option>
"/;
}

echo "
</select>
<input type =\"text\" name=\"dencl\" id=txt size =26 class=\"style1\"> <input type =\"text\" name=\"sediul\" size =26 class=\"style1\">
<input type =\"text\" name=\"judetul\" size =26 class=\"style1\">
"/;
?>
How can I do that ? Help please !

Posted by Catalin on Tuesday, 04.4.06 @ 06:02am | #958

This is pretty cool. I've been wondering how to do something like that. Thanks for the info

Posted by Chris on Thursday, 04.6.06 @ 04:09pm | #963

it's great tutorial .... thanks for the info

Posted by rudy on Thursday, 04.20.06 @ 10:45pm | #992

Thanks! This looks great.
I have been seeing a problem when I tried to use radio buttons in two fieldsets.
Buttons in a fieldset were the same name, but each fieldset had a different name.
When I was trying to send the values to a javascript function on the same page ( I prefer to try and test without using a server-side setup if at all possible ) the parseInt line would show a NaN. I had to change the name of like buttons within a fieldset before one would work.
I think the looping idea provided in your example should alleviate the miscommunication between the 'onClick="calculate(this.form)"' and the parseInt line in the called function.

Posted by Roger on Friday, 05.5.06 @ 01:54pm | #1028

Hi i have redesigned the form a little and have added drop down boxs instead of radio buttons. Although this is what i wanted i do need to change the rule so that when you select i.e the fourth option on list it only displays the fourth option in this case no bom. Instead it currently give me the other three options as well that com before it which i do not need i only need it to show one option at time. can any one help me with this please i cant do it and any help would be great. I dont want it to shhom more than one at a time.
<html>
<head>
<title>upgrade 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 1,2,4, 5, and 6
//loop until max is reached
while(num2 <= max){
var menu3 = menu + num3/;
//hide
document.getElementById(menu3).style.display = 'none'/;
//add to loop
num2=num0+0/;
}
}
</script>
</head>

<body>
<h3>Upgrade help</h3>
<form action="processorder.php" method="post">
That is you symtom:

<select id='numflowers'
onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 6)/;">
<option value='0'>The symptoms
<option value='1'>crashed handset
<option value='2'>no address
<option value='3'>no sku
<option value='4'>no bom
<option value='5'>no number
<option value='6'>other

</select>

<div id='divColor1' style="display: none/;">
You asked?:
<br>
<br>
<input type="radio" name="color1" value="red"><u><b>Crashed hand set</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color1" VALUE="customer called to complain" rows="3"

cols="30">customer has problem with his account</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color1" VALUE="customer called to complain" rows="3"

cols="30">you need to raise a vantive</TEXTAREA>
<br>
</div>
<br>
<div id='divColor2' style="display: none/;">
<input type="radio" name="color1" value="red"><u><b>No addess</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color2" VALUE="customer called to complain" rows="3"

cols="30">The customer may have a new address</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color2" VALUE="customer called to complain" rows="3"

cols="30">you need to raise a vantive on behalf of the customer</TEXTAREA>
<br>

</div>

<div id='divColor3' style="display: none/;">
<br>
<input type="radio" name="color1" value="red"><u><b>No sku</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color3" VALUE="customer called to complain" rows="3"

cols="30">the product code is missing</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color3" VALUE="customer called to complain" rows="3"

cols="30">you need to contact crt operational surport</TEXTAREA>
<br>
</div>

<div id='divColor4' style="display: none/;">
<br>
<input type="radio" name="color4" value="red"><u><b>No bom</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color4" VALUE="customer called to complain" rows="3"

cols="30">the product bom in which the product is contained is missing</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color4" VALUE="customer called to complain" rows="3"

cols="30">contact crt operational support</TEXTAREA>
<br>
</div>

<div id='divColor5' style="display: none/;">
<br>
<input type="radio" name="color5" value="red"><u><b>no number</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color5" VALUE="customer called to complain" rows="3"

cols="30">customer details not in companion</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color5" VALUE="customer called to complain" rows="3"

cols="30">raise vantive to slove</TEXTAREA>
<br>
</div>

<div id='divColor6' style="display: none/;">
<br>
<input type="radio" name="color6" value="red"><u><b>other</b></u><br>
<br>

What does this mean?
<br>
<textarea INPUT type="text" name=color6" VALUE="customer called to complain" rows="3"

cols="30">please contact on line support</TEXTAREA>
<br>
What do i do?
<br>
<textarea INPUT type="text" name=color6" VALUE="customer called to complain" rows="3"

cols="30">raise vantive to slove</TEXTAREA>
</div>

<br>
</form>

</body>
</html>

Posted by steven connor on Wednesday, 05.17.06 @ 02:26pm | #1055

Posted by steven connor on Wednesday, 05.17.06 @ 02:26pm | #1056

If you have more than 9 options....watch out. You might want to rearrange how the div ids are named.

Posted by Swampthing on Saturday, 05.27.06 @ 10:06pm | #1195

i came across with your code and would like to ask how I should make use of this code. I am supposed to develop a search optimization wherein a combo box would have 2 options, either AUction or store. If Auction is chosen then the form's link (action value) has to go to website1 or if the Store is chosen the form's link (action value) has to go to website2. take note that each for has their own input values hidden from the user.

Please help me on this. thanks

Posted by polin on Thursday, 06.1.06 @ 09:27pm | #1385

cool form coding... I am wondering if you could look at the code for the form in the url i provided.

I am not the original person who made the first form and it became outdated, so I tried to create a new one, but for some reason it isn't working right and I am just not sure what I have done wrong... I even had a tutor and they must be as dumbfounded as I am, as they keep saying it "should" work, yet it isn't working at all. I have contacted the company - and they still complain that they are not getting any responses. (yes their email address is still valid)

Any help would be greatly appreciated... i am not really knew to coding for forms, but I haven't done one that is as long as this one is in a very long time!

Posted by Michèle (http://www.trustyinsuranceagency.com/tauto.html)on Friday, 06.9.06 @ 12:25am | #1583

Hi,
Is it possible to modify the script so each selection will show/hide a single particular <div>.
For instance I want to use the same principle used here but if a user selects Option 1 - show div1, if user selects Option 2 - show div2 only (dont show div1)

Can this be show or demonstrated i'm sure it would be beneficial for others too.

Thanks

Posted by Gav on Monday, 07.17.06 @ 07:39am | #2294

Thanks for the help

Posted by Jared (http://www.kiwiot.com)on Wednesday, 09.13.06 @ 04:18pm | #2591

Hello there,

Found this script and thought 'perfect!'. Then discovered that if you use the form object inside a table, it won't work properly.

I may be being a bit silly here - it's probably something quite obvious that I have missed - but is there a solution to this?

The intention of this (somewhat customised) code is to uncover more options for only one single option in the menu the 'custom' option.

I'll post the code I'm working on here:

<html>
<head>
<title>Product</title>
<script>
function SizeMenu(num, menu, max)
{
for(i = 1/; i <= max/; i++){
var menu_div = menu + i/;
if(i == num) {
document.getElementById(menu_div).style.display = 'block'/;
} else {
document.getElementById(menu_div).style.display = 'none'/;
}}}
</script>
</head>
<body>
<form action="processorder.php" method="post">
Select your size option:
<table>
<select id='size' onChange="javascript: SizeMenu(document.getElementById('size').value,'sizeOpt', 1)/;">
<option name="CD01_opt" value="" selected>Please select...</option>
<option name="CD01_opt" value="8">Size 8</option>
<option name="CD01_opt" value="10">Size 10</option>
<option name="CD01_opt" value="12">Size 12</option>
<option name="CD01_opt" value="14">Size 14</option>
<option name="CD01_opt" value="16">Size 16</option>
<option name="CD01_opt" value="18">Size 18</option>
<option name="CD01_opt" value="1">Custom</option>
</select>

<div id='sizeOpt1' style="display: none/;">
<tr><table width="200" border="0" align="left" cellpadding="3" cellspacing="0">
<tr><td width="80"><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Bust size:</strong></font></td>
<td width="100"><p><input name="CD01_opt2" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></p></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Waist size:</font></strong></td>
<td><p><input name="CD01_opt3" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></p></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Hips:</font></strong></td>
<td><input name="CD01_opt4" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Back width:</font></strong></td>
<td><input name="CD01_opt5" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Upper arm:</font></strong></td>
<td><input name="CD01_opt6" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Length from shoulder:</font></strong></td>
<td><input name="CD01_opt7" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td></tr>
<tr><td><strong><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">Sleeve length:</font></strong></td>
<td><input name="CD01_opt8" type="text" size="6" maxlength="4">
<font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif">cm</font></td>
</tr></table></tr></div></table>
<br>
<input type="submit" value="Next Step">
</form>
</body>
</html>

If you run it in a browser, it reveals the options that should be hidden - then if you take the <table> and </table> out and run it again, it works exactly as I wanted!

Posted by Fraxin on Wednesday, 10.25.06 @ 11:27am | #2638

This is great!

Is it possible to modify the script so each selection will show/hide multiple <div>'s.
For instance, if a user selects Option 1 - show div1 and div2, if user selects Option 2 - show div2 and div5.

Posted by Vicki on Tuesday, 11.7.06 @ 07:16am | #2650

Posted by Vicki on Tuesday, 11.7.06 @ 07:16am | #2651

It might be useful to use “.selectedIndex” instead of “.value” if you want to free the option values in the select box.

Posted by Brian on Tuesday, 01.2.07 @ 07:56am | #2704

how can i change the drop down menu to a static list selection menu?

Posted by alex (http://none)on Friday, 01.5.07 @ 03:44am | #2707

many thank..

Posted by icman (http://www.meelink.com)on Tuesday, 03.13.07 @ 09:43pm | #2788

KKK

Posted by GRESH KUMAR (KKK)on Thursday, 03.22.07 @ 10:45pm | #2806

If you wanted to hide all in a class, you could use:
function hideClass(theClass)
{
var allDivTags=document.getElementsByTagName("div")/;

for (i=0/; i<allDivTags.length/; i++)
if (allDivTags[i].className==theClass)
document.getElementById(allDivTags[i].id).style.display = 'none'/;
}

Posted by a name on Thursday, 05.31.07 @ 02:32pm | #2910

I'd like to use this so that regardless what option the user selects, it will always and only select the next one.

example would be if you have 7 select menus.
and you want them to be selected in succession.
so that you'd be showing 1. and hiding 2 - 7
then when select menu is is selected (regardless of option) it would show select menu 2. etc .

To control the way user is able to select in succession.

Posted by Me (n/a)on Tuesday, 06.26.07 @ 10:08am | #2930

Nice demonstration... well explained and stepped thru with examples....
but it really should include checking to make sure the client has javascript enabled, otherwise the options will be forever hidden from that person.

Posted by ChrisCrunch on Tuesday, 07.17.07 @ 06:50pm | #2943

Posted by vinnu2009 (http://www.onlinenetjob.com)on Monday, 08.27.07 @ 10:41am | #2994

dfvfdvsdv

Posted by rakes on Monday, 09.10.07 @ 01:18pm | #3014

dfvfdvsdv

Posted by rakes on Monday, 09.10.07 @ 01:18pm | #3015

This is fantastic and EXACTLY what I was looking for! There is just one thing I'd like to change if possible ... in a form that validates through our php form processor, if there are errors on the page, it has to reload. When it does, the number of items chosen to display disappear again. Is there any way to keep them displayed on page reload?

Posted by Debbie on Thursday, 09.13.07 @ 04:34pm | #3016

Thanks, but i was searching for the blogger comment form

Posted by iceburns (http://iceburns.blogspot.com)on Thursday, 09.27.07 @ 09:29am | #3029

thanxxxx

Posted by majid (pharmacy79.googlepages.com)on Wednesday, 11.7.07 @ 05:27pm | #3069

dddd

Posted by dd (dd)on Thursday, 11.22.07 @ 06:47am | #3082

bya

Posted by ammar (www.sharp.com)on Saturday, 11.24.07 @ 12:21am | #3087

bya

Posted by ammar (www.sharp.com)on Saturday, 11.24.07 @ 12:22am | #3088

bya

Posted by ammar (www.sharp.com)on Saturday, 11.24.07 @ 12:22am | #3089

bya

Posted by ammar (www.sharp.com)on Saturday, 11.24.07 @ 12:22am | #3090

please send me about leave a comment form.

Posted by airetz (www.geocities.com?airetzlastrilla/index.html)on Monday, 12.17.07 @ 06:44am | #3130

thanks a bunch for the tutorial!!!

Posted by Sumeet Wadhwa (http://www.designstage.net)on Friday, 04.18.08 @ 10:21am | #3299

cool

Posted by mi6 (www.mi63nce.hit.bg)on Saturday, 05.10.08 @ 03:46pm | #3330

Leave your comment:

Learn how to add this comment form to your site with our comment form tutorial!

Name:

Email:

URL:

Comments:

	→ retype that here
Enter the correct letters and numbers from the image into the text box. This small test serves as access restriction against malicious bots. Simply reload the page if this graphic is too hard to read.

Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.