Back to Mal's forms page
<<< Clicking on this logo will return you to my Mal's Forms home page.

As the title says, this is one hell of a complex form and took David in the forum hours to build (so hats off to David).

You will need to right click on this page and view the source, then copy ALL of the page content and paste into your html editor.

What David has done is to use a dropdown script reduce the variables shown by placing them under a higher selection. OK, you're lost, let me show you.

Select your camp area, the next selection of what is available is shown, now choose a different camp area, you see a different selection of sites available - neat huh. The dropdown.js can be modified to suit your needs easily, simply open the script and scroll down to the bottom, you'll see the line:
dynamicSelect("campArea", "campSite"); this line you can modify to suit your dropdowns; let me show you.
On your form you will have for example: select id="campArea" name="campArea" as we have, then we have the options as for example: option value="The Great Lakes" anyone chosing this option is only shown matching entries from the second selection select id="campSite" name="campSite" that match the class - class="The Great Lakes. So if your first dropdown is for example color and the second dropdown shade, then you'd use: dynamicSelect("color", "shade"); got it?

The above feature is available from the page: Mal's Forms

After the user has chosen their camp area/site, we have all of the additional options. This is where the above script from line 20-278 (area) comes into play.

Each area of the script above for the additional options has for example:
if (document.myForm.addPadding.value>'') {
tmpField=document.myForm.addPadding.value;
tmpArray = tmpField.split(':');
tmpDescription+='{br}'+tmpArray[0];
tmpPrice+=parseInt(tmpArray[1]);
}
to modify one of these script areas to suit your form, simply change the lines document.myForm.addPadding.value to your select name for example: select name="addPadding" onchange="sumFields();"

I'm sure that looking down this page you'll be able to see how easy it is to implement this form to suit the one you're designing.

You will need this file, the dropdown script. Right click on this link and 'save as', and save the file into the same folder as the page you're building. Click to Download


View the page source!

close

Here's the form, have fun...

Shelters

Choose the area: Choose the Site:

No of Days:

How many people are camping:

Would you like additional padding under your tent?

Would you like tent carpet squares?

Would you like a gazebo (screened in):

Would you like a canopy (no sides)?

Would you like a 3x3 privacy shelter? $2.00

Sleeping Equipment

Sleeping bags? $5.00

Foam Ground Mats? (1/4" thick)? $2.00 Foam Ground Mat? (1/2" thick)? $3.00

Cots (large tent required)? Adult $6.00 Childrens $3.00

Extra Blankets? $2.00

Kitchen Equipment

Tabletop 2 burner stove? $10.00 (propane included)

Standing 2 burner stove? $15.00 (propane included)

Tables 4x4 $2.00 Tables 3x6 $4.00

Cooksets: $5.00 Coffee Maker $5.00

Cooking Station: $5.00

Place Settings:

2 Plastic wash bins? $1.00 Dish clothes? $1.00

Campfire Cooking

Cast Iron Skillet $5.00 Hot Dog Sticks $1.00 Mountain Pie Maker $2.00

Dutch Oven (with tripod) $5.00 Cooking Grill Grate $2.00

Camp Comforts

Propane Lantern? (propane included) $3.00 Battery Lantern (tent)? $5.00 Flashlights? $5.00

Camp Chairs? $2.00

Camp Toilet? $3.00 Waste bags? (24 count) $10.00

Camp Shower Bag w/Shower Head? $3.00 Shower Deck? $2.00

Current Total: