Member Avatar for NickBogi

I am trying to create a dynamic form for the first time. I need an product reservation form that allows up to 10 products to be reserved. I have line 1 done and the javascript code is working.

http://ryanpartyrentals.com/nb/formtest.php

Let's call those fields Category, SubCat, SubCat2 (left to right). The problem lies when I try to put the second line of the form in. When I do, either the first line stops loading dynamically or the second line does nothing. The second line would have the exact same options but it has to be different fields, ie. CategoryB, SubCatB, SubCat2B because a customer may want to reserve one product on the first line and another on the second, and yet another on the third line... so on and so forth.

Here is the code I am using and I attached the javascript code I am using:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Equipment Reservation Request | Ryan Party Rentals | Serving PA, NJ, &amp; DE</title>

<script language="javascript" src="http://ryanpartyrentals.com/nb/list.js"></script>

</head>



<form action="mailto:nbogatin@nickbogatin.com" method="POST" enctype="multipart/form-data" name="drop_list">

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();">
<SELECT NAME="Category" onChange="SelectSubCat();" >
<Option value="">Select A Category</option>
</SELECT>&nbsp;
<SELECT id="SubCat" NAME="SubCat">
<Option value="">Select An Item</option>
</SELECT>&nbsp;
<SELECT id="SubCat2" NAME="SubCat2">
<Option value="">Quantity</option>
<Option value="">1</option>
<Option value="">2</option>
<Option value="">3</option>
<Option value="">4</option>
<Option value="">5</option>
<Option value="">6</option>
<Option value="">7</option>
<Option value="">8</option>
<Option value="">9</option>
<Option value="">10</option>
<Option value="">11</option>
<Option value="">12</option>
<Option value="">13</option>
<Option value="">14</option>
<Option value="">15</option>
<Option value="">16</option>
<Option value="">17</option>
<Option value="">18</option>
<Option value="">19</option>
<Option value="">20</option>
<Option value="">21</option>
<Option value="">22</option>
<Option value="">23</option>
<Option value="">24</option>
<Option value="">25</option>
<Option value="">26</option>
<Option value="">27</option>
<Option value="">28</option>
<Option value="">29</option>
<Option value="">30</option>
<Option value="">31</option>
<Option value="">32</option>
<Option value="">33</option>
<Option value="">34</option>
<Option value="">35</option>
<Option value="">36</option>
<Option value="">37</option>
<Option value="">38</option>
<Option value="">39</option>
<Option value="">40</option>
<Option value="">40+</option>
</SELECT>

</body>
</form>


</body>

</html>

Any help is appreciated!!!!

How can I add in multiple lines.

function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "Pole Tents", "Pole Tents", "");
addOption(document.drop_list.Category, "Frame Tents", "Frame Tents", "");
addOption(document.drop_list.Category, "Tent Accessories", "Tent Accessories", "");
addOption(document.drop_list.Category, "Tent Lighting", "Tent Lighting", "");
addOption(document.drop_list.Category, "Tables", "Tables", "");
addOption(document.drop_list.Category, "Chairs", "Chairs", "");
addOption(document.drop_list.Category, "Covers & Linens", "Covers & Linens", "");
addOption(document.drop_list.Category, "Dance Floors", "Dance Floors", "");
addOption(document.drop_list.Category, "Beverage/Food Service", "Beverage/Food Service", "");
}
function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "Select An Item", "");

if(document.drop_list.Category.value == 'Pole Tents'){
addOption(document.drop_list.SubCat,"20 X 20 White | 32-40 ppl", "20 X 20 White | 32-40 ppl");
addOption(document.drop_list.SubCat,"20 X 30 White | 48-60 ppl", "20 X 30 White | 48-60 ppl");
addOption(document.drop_list.SubCat,"20 X 40 White | 64-80 ppl", "20 X 40 White | 64-80 ppl");
addOption(document.drop_list.SubCat,"30 X 40 White | 96-120 ppl", "30 X 40 White | 96-120 ppl");
addOption(document.drop_list.SubCat,"30 X 60 White | 144-180 ppl", "30 X 60 White | 144-180 ppl");
addOption(document.drop_list.SubCat,"40 X 40 White | 128-160 ppl", "40 X 40 White | 128-160 ppl");
addOption(document.drop_list.SubCat,"40 X 60 White | 192-240 ppl", "40 X 60 White | 192-240 ppl");
addOption(document.drop_list.SubCat,"40 X 80 White | 256-320 ppl", "40 X 80 White | 256-320 ppl");
addOption(document.drop_list.SubCat,"40 X 100 White | 320-400 ppl", "40 X 100 White | 320-400 ppl");
addOption(document.drop_list.SubCat,"60 X 100 White | 480-600 ppl", "60 X 100 White | 480-600 ppl");
}

if(document.drop_list.Category.value == 'Frame Tents'){
addOption(document.drop_list.SubCat,"10 X 10 White | 8-10 ppl", "10 X 10 White | 8-10 ppl");
addOption(document.drop_list.SubCat,"15 X 15 White | 17-22 ppl", "15 X 15 White | 17-22 ppl");
addOption(document.drop_list.SubCat,"20 X 20 White | 32-40 ppl", "20 X 20 White | 32-40 ppl");
addOption(document.drop_list.SubCat,"20 X 30 White | 48-60 ppl", "20 X 30 White | 48-60 ppl");
addOption(document.drop_list.SubCat,"20 X 40 White | 64-80 ppl", "20 X 40 White | 64-80 ppl");
addOption(document.drop_list.SubCat,"30 X 30 White | 72-90 ppl", "30 X 30 White | 72-90 ppl");
addOption(document.drop_list.SubCat,"30 X 40 White | 96-120 ppl", "30 X 40 White | 96-120 ppl");
addOption(document.drop_list.SubCat,"30 X 50 White | 120-150 ppl", "30 X 50 White | 120-150 ppl");
addOption(document.drop_list.SubCat,"30 X 60 White | 144-180 ppl", "30 X 60 White | 144-180 ppl");
addOption(document.drop_list.SubCat,"30 X 70 White | 168-210 ppl", "30 X 70 White | 168-210 ppl");
addOption(document.drop_list.SubCat,"30 X 90 White | 216-270 ppl", "30 X 90 White | 216-270 ppl");
addOption(document.drop_list.SubCat,"40 X 40 White | 128-160 ppl", "40 X 40 White | 128-160 ppl");
addOption(document.drop_list.SubCat,"40 X 60 White | 192-240 ppl", "40 X 60 White | 192-240 ppl");
}

if(document.drop_list.Category.value == 'Tent Accessories'){
addOption(document.drop_list.SubCat,"Solid Sidewall", "Solid Sidewall");
addOption(document.drop_list.SubCat,"Windowed Sidewall", "Windowed Sidewall");
addOption(document.drop_list.SubCat,"Rain Gutter (between Tents)", "Rain Gutter (between Tents)");
addOption(document.drop_list.SubCat,"Tent Liner", "Tent Liner");
addOption(document.drop_list.SubCat,"Tent Fabric Drapery", "Tent Fabric Drapery");
addOption(document.drop_list.SubCat,"Tent Pole Wrap", "Tent Pole Wrap");
addOption(document.drop_list.SubCat,"170K BTU Heater + Propane", "170K BTU Heater + Propane");
addOption(document.drop_list.SubCat,"Umbrella Heater + Propane", "Umbrella Heater + Propane");
addOption(document.drop_list.SubCat,"Pedestal Fan", "Pedestal Fan");
}

if(document.drop_list.Category.value == 'Tent Lighting'){
addOption(document.drop_list.SubCat,"Globe Lanterns", "Globe Lanterns");
addOption(document.drop_list.SubCat,"35ft Plastic Globe Strands", "35ft Plastic Globe Strands");
}

if(document.drop_list.Category.value == 'Tables'){
addOption(document.drop_list.SubCat,"48inch Round Table", "48inch Round Table");
addOption(document.drop_list.SubCat,"60inch Round Table", "60inch Round Table");
addOption(document.drop_list.SubCat,"6ft Rectangular Table", "6ft Rectangular Table");
addOption(document.drop_list.SubCat,"8ft Rectangular Table", "8ft Rectangular Table");
}

if(document.drop_list.Category.value == 'Chairs'){
addOption(document.drop_list.SubCat,"Folding Chairs - Bone", "Folding Chairs - Bone");
addOption(document.drop_list.SubCat,"Folding Chairs - White", "Folding Chairs - White");
addOption(document.drop_list.SubCat,"Folding Chairs - Padded White", "Folding Chairs - Padded White");
}

if(document.drop_list.Category.value == 'Covers & Linens'){
addOption(document.drop_list.SubCat,"60 X 120 Rectangular Table Cover", "60 X 120 Rectangular Table Cover");
addOption(document.drop_list.SubCat,"85inch Square Table Cover", "85inch Square Table Cover");
addOption(document.drop_list.SubCat,"90inch Round Table Cover", "90inch Round Table Cover");
addOption(document.drop_list.SubCat,"108inch Round Table Cover", "108inch Round Table Cover");
addOption(document.drop_list.SubCat,"120inch Round Table Cover", "120inch Round Table Cover");
addOption(document.drop_list.SubCat,"132inch Round Table Cover", "132inch Round Table Cover");
addOption(document.drop_list.SubCat,"Napkins", "Napkins");
addOption(document.drop_list.SubCat,"14ft Table Skirting", "14ft Table Skirting");
addOption(document.drop_list.SubCat,"Chair Covers", "Chair Covers");
}

if(document.drop_list.Category.value == 'Dance Floors'){
addOption(document.drop_list.SubCat,"4 X 4 Wood Floor", "4 X 4 Wood Floor");
addOption(document.drop_list.SubCat,"4 X 4 B&W Floor", "4 X 4 B&W Floor");
}

if(document.drop_list.Category.value == 'Beverage/Food Service'){
addOption(document.drop_list.SubCat,"8ft Bar W/Riser, Linen, & Skirting", "8ft Bar W/Riser, Linen, & Skirting");
addOption(document.drop_list.SubCat,"30 Cup Coffee Maker", "30 Cup Coffee Maker");
addOption(document.drop_list.SubCat,"5 Gallon Thermos", "5 Gallon Thermos");
addOption(document.drop_list.SubCat,"Chafing Dish - 8 Quart", "Chafing Dish - 8 Quart");
addOption(document.drop_list.SubCat,"Sternos", "Sternos");
addOption(document.drop_list.SubCat,"Trash Cans", "Trash Cans");
}

}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}
  • 2 Contributors
  • 1 Reply
  • 165 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Nbogatin,

Your HTML page must have just one <body>...</body> containing all the HTML including the <form>...</form> tags. Blocks of HTML can't each have their own body, but they can be wrapped in <div>s or <table>s.

With just one body, fillCategory will be called just once. You need to work out a way to make fillCategory operate on each product line in turn (eg. in a loop).

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.