Interactive Forms

Why interactive forms?				stuffinside thetag is showing up, tables may be
Forms are easy enough to create when they are				yourproblem. To fix this, either don't use tables, or
simple, likesearch boxes. But what if you need them				create anentire seperate table for the information
to be complex? Howabout changing the forms based				inside thetag. Here is the code:
on input by the viewer? Thisis where interactive				Flower Order Form
forms using Javascript and HTML canhelp. I'll use a				Select how many flowers you would like:
simple example on how interactive forms canbe
useful.				Number of Flowers
The problem				1
I am going to use a business project as an example				2
to teachinteractive forms. Imagine that we are				3
creating a orderingsystem for flowers. We would like				4
the customer to be able toorder a bouquet of				5
flowers. The customer can choose to haveany				Choose type of flower 1:
number of flowers in the bouqet from 1 to 6. For				Red
eachflower, the customer can choose a type of				White
flower, and thereare 3 different kinds of flowers.				Yellow
Now imagine all theseoptions as a regular form. There				Choose type of flower 2:
would be 18 options tochoose from, even if you only				Red
wanted one flower! This wouldbe ugly! In this tutorial				White
we will learn how we can show andhide form				Yellow
elements depending on the input by the customer.				Choose type of flower 3:
Now let's get started!				Red
Creating the interactive form				White
-HTML				Yellow
We are going to create a page where you can enter				Choose type of flower 4:
theinformation for ordering flowers. We've decided				Red
on having adrop down menu to select the number of				White
flowers, and then forthe number selected, display				Yellow
that number of options tochoose the type of flower.				Choose type of flower 5:
We'll start by creating the HTMLforms. First we will				Red
write the html code for the form.				White
				Yellow
Number of Flowers				Choose type of flower 6:
1				Red
2				White
3				Yellow
4				We used css to hide thetags. The next step is to
5				usejavascript to show and hide each of
6				thecellsdepending on what is selected in the drop
This will create a menu.				down menu. We willstart out by making a javascript
Next we need to create the form where the				function, then I willexplain the code and link it up with
customer willchoose the type of flower they would				the drop down menu.
like. We will let themchoose between a red rose, a				Javascript
white rose, and a yellow rose.				We are going to create a function that will show and
I am going to use radio buttons for the selection.				hidethecells. There are 3 things we need to pass
Here isthe code:				onto thescript: the number of total options, the name
Red				prefix for thetags, and the number of options(to end
White				the loop). Hereis the script that I wrote:
Yellow				Add this code inside the section of your page. Now
For this tutorial, I assume you have a basic				wehave one less step; to call the function from the
knowledge of				drop downbox. Here is the code to do that:
HTML. All of these pages still need mandatory tags,				ue,'divCo
but Ileft them out because of the size they would
take up. Noticehow I made all the options the same				Number of Flowers
name. This is so theyare grouped together, and only				1
one option can be choosen.				2
This is what it will look like: 0 Red 0 White 0 Yellow				3
Duplicate this code 6 times, for each of the flower.				4
Butevery time you see "color1", change that to a				5
different nameso they are all seperate. I will use				6
"color1", "color2",				What this does is when the value is change, it will
"color3", and so on.				pass onthe value, the name prefix of thecells, and
Now we need to put all of this together into an				thenumber ofcells. In the first part, make sure
orderingform. But we need to add something so that				thegetElementById('numflowers') matches the 'id'
the forms candisappear. We will addtags around each				attribute inthe
of the flowertype selection rows. Enter the following				Choose type of flower 1:
code around each ofthe groups of options. Make				Red
sure that for each one, youlabel the id tag for				White
thedifferently. For example, thefirst group will start				Yellow
withwill start with				Choose type of flower 2:
IMPORTANT. When we pass variables onto the				Red
script, the onlything that should change between the				White
name of thetagsshould be the number. This is				Yellow
because we will use a loop togo through all the				Choose type of flower 3:
numbers. We will pass through the name ofthetags				Red
to the javascript script, and the script willadd the				White
numbers.				Yellow
Choose type of flower 1:				Choose type of flower 4:
Red				Red
Whitename="color1" value="yellow">Yellow				White
Now we have each option groups surrounded by				Yellow
atag.				Choose type of flower 5:
This will allow us to change their visibility				Red
withjavascript. I have puttags around the options,				White
andadded a submit button. Note: when addingtags				Yellow
inside atable, make sure they are contained within a				Choose type of flower 6:
cell.				Red
Something like				White
< d>< r>				Yellow
< able>will not work for the same reason that adding				Thats all! Have a great day!
text outsideof cells inside a table doesn't work. If the

Victorias Montain inn

Interactive Forms

Articles