Flowers

Interactive 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 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. 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: Red White 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 YellowDuplicate 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

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
differently. For example, the first group will start with

THIS IS IMPORTANT. When we pass variables onto the script, the only thing that should change between the name of the

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
tags to the javascript script, and the script will add the numbers. Now we have each option groups surrounded by a
tag.

This will allow us to change their visibility with javascript. I have put

tags around the options, and added a submit button. Note: when adding
tags inside a table, make sure they are contained within a cell. Something like
< d>< r>< able> will not work for the same reason that adding text outside of cells inside a table doesn't work. If the stuff inside the
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

tag. Here is the code:

Flower Order Form

Select how many flowers you would like:
We used css to hide the
tags. The next step is to use javascript to show and hide each of the
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
cells.

There are 3 things we need to pass onto the script: the number of total options, the name prefix for the

tags, and the number of options(to end the loop). Here is the script that I wrote: Add this code inside the 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,'divCoWhat this does is when the value is change, it will pass on the value, the name prefix of the
cells, and the number of
cells.

In the first part, make sure the getElementById('numflowers') matches the 'id' attribute in the

Thats all! Have a great day!.


Easter Lilies, A Coastal Treasure

Bill Ferry, spokesman for the Easter Lily Research Foundation announced the launch of their updated web site www.easterlily.net. The site has a fresh look as well as more links to information about the planting, growing and harvesting the beautiful Easter Lily.On either side of the border between Oregon and California, and within view of the Pacific Ocean, the soil and climate that is ideal to the raising of Easter Lily bulbs. This is the same bulb that is later greenhouse grown to produce such magnificent flowers.This small region, no more than a half mile wide by, perhaps, 12 miles long, contains such a superior mix of soil and weather that virtually all Easter Lily bulbs in North America are grown here. This is productive land. Seldom touched by freeze or drought, the soils have their beginnings in the nearby ocean.

This verdant land was once ocean floor.According to Lee Riddle, Director of Horticulture at...

Easter Lilies, A Coastal Treasure
Flowers > Easter Lilies, A Coastal Treasure

Rose Garden

Time and again it has been proved that roses can be grown effectively in gardens in almost every climatic and environmental condition. One may nurture a garden in an assortment of colors and various indigenous and hybrid varieties. Creating a rose garden is at times a difficult exercise but people do not have to be specialists to grow roses.

While selecting roses, there are three popular and distinct varieties that one might select from. In case a garden plot is small, people may opt for the miniature rose types. These can be grown in flowerpots or on the ground.

A garden may comprise of rose bushes. These are characteristic as they grow their flowers for the most part at the top of the plant. These sizes may range from a few inches to about 6 feet. A garden enthusiast may also select the climbing roses variety, which can be directed around pillars or even climb the walls of a house.

It is important to prepare a garden bed well in advance of planting...

Rose Garden
Flowers > Rose Garden