JQuery, Javascript, HTML Checkbox Price Quote :   Ok, I have been trying to figure this out for about a day now.   What I am trying to do is to create a form.  The first question and the only question that they will see is a drop down that allows them to pick a state.  Once they picked a state, pending on their selection, it will pick a check list according to their selection.  Check list will have roughly 20 selections, but for now, it just six.  The user can then go through the check list and check the items they wanted. Once an item been checked, another div will appear below it prompting the user to put in how many years they want to purchase this item for and the quantity.  Which is the part that I got to so far.  

But Now, here is where I am stuck at and what I am trying to do... I did add hidden input values of service fee, license fee, and training hours.  Once the user checks on an item...  I want to use jquery to calculate the service fee times years to get the total_service.  then add total_service plus the license fee to get the item_cost.  Then the item_cost times the quantity which I will then get the total_item_cost.  

I then want to get and display, show, or list out the item description, service fee, years, license fee, quantity and training hours into a line, div, or table, kinda of like a shopping cart.  And each time an item is checked, it will show each item below.

Finally, at the bottom of list, I want to have the total cost of the items and total training times.

Right now I am having issues with the dropdown of years, it seems to reset itself.  And issues with the calculations. 

As far as the form, once I submit the form it will go to people emails and etc.  just trying to get the jquery code to work first.

Any advice is great.  Code is below...



     <style>
     .box {
       display: none;
     }
     </style>
     <form name="" id="myForm" method="post" class="" action="http://demo.camavision.com/VCSWeb/remarks-look-up/" >
																				
										<div class="tx-row" style="width:100%; float:left; clear:right;">
																					
											<div  style="float:left; margin-top:-20px; ">								
												<label>
													<strong style="font-size:14px;">State:</strong> <span style="font-size:10px; color:#ff0000;">(required)</span><br />
													<select style= "width:90%; height:35px; font-size:18px; border: 1px #396ba5 solid;"  id="state" name="state" required>
														<option  value="" selected="selected" >Select State</option>
														<option value="IlIaNd"  >Iowa</option>
														<option  value="IlIaNd" >Illinois</option>
														<option  value="Minnesota" >Minnesota</option>
														<option  value="Missouri" >Missouri</option>
														<option  value="Nebraska" >Nebraska</option>
														<option  value="IlIaNd" >North Dakota</option>
														<option  value="SouthDakota" >South Dakota</option>														
													</select>
												</label>
											</div>
										</div>	
										<script>
										$(document).ready(function(){
										$("select").change(function(){
											$(this).find("option:selected").each(function(){
												if($(this).attr("value")=="IlIaNd"){
													$(".box").not(".IlIaNd").hide();
													$(".IlIaNd").show();
												}else if($(this).attr("value")=="Minnesota"){
													$(".box").not(".Minnesota").hide();
													$(".Minnesota").show();
												}else if($(this).attr("value")=="Missouri"){
													$(".box").not(".Missouri").hide();
													$(".Missouri").show();
												}else if($(this).attr("value")=="Nebraska"){
													$(".box").not(".Nebraska").hide();
													$(".Nebraska").show();
												}else if($(this).attr("value")=="SouthDakota"){
													$(".box").not(".SouthDakota").hide();
													$(".SouthDakota").show();
												}else{
													$(".box").hide();
												}
											});
										}).change();
										});
										</script>
										<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
										
									<div style="border-bottom: 1px solid #cccccc; width: 100%; float:left; clear:both;" > </div>
									<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
									<div style="width: 100%; float:left; clear:both;" class="IlIaNd box">
										<div class="tx-column tx-column-size-1-3" >	
											<input type="checkbox"  name="description" id="chk10" value="Advanced Scheduler" > Advanced Scheduler
												<div id="sb10" style="width:100%;">
													<div style='width:50%; float:left;'>
														Years: <select name='Years'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<div style='width:50%; float:left;'>
														Quantity: <select name='Qty'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<input type='hidden' name='servicefee' value="1000">
													<input type='hidden' name='licensefee' value="1500">
													<input type='hidden' name='traininghrs' value="8" >
												</div>
												<input type="checkbox"  name="description" id="chk11" value="Advanced Printer" > Advanced Printer
												<div id="sb11" style="width:100%;">
													<div style='width:50%; float:left;'>
														Years: <select name='Years'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<div style='width:50%; float:left;'>
														Quantity: <select name='Qty'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<input type='hidden' name='servicefee' value="1000">
													<input type='hidden' name='licensefee' value="">
													<input type='hidden' name='traininghrs' value="10" >
												</div>
										</div>
										<div class="tx-column tx-column-size-1-3" >	
											<input type="checkbox"  name="description" id="chk12" value="Advanced Reader" > Advanced Reader
												<div id="sb12" style="width:100%;">
													<div style='width:50%; float:left;'>
														Years: <select name='Years'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<div style='width:50%; float:left;'>
														Quantity: <select name='Qty'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<input type='hidden' name='servicefee' value="1200">
													<input type='hidden' name='licensefee' value="2000">
													<input type='hidden' name='traininghrs' value="8" >
												</div>
												<input type="checkbox"  name="description" id="chk13" value="Advanced Organizer" > Advanced Organizer
												<div id="sb13" style="width:100%;">
													<div style='width:50%; float:left;'>
														Years: <select name='Years'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<div style='width:50%; float:left;'>
														Quantity: <select name='Qty'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<input type='hidden' name='servicefee' value=" ">
													<input type='hidden' name='licensefee' value="3000">
													<input type='hidden' name='traininghrs' value="10" >
												</div>
										</div>
										<div class="tx-column tx-column-size-1-3" >	
											<input type="checkbox"  name="description" id="chk14" value="Advanced TaskMaster" > Advanced TaskMaster
												<div id="sb14" style="width:100%;">
													<div style='width:50%; float:left;'>
														Years: <select name='Years'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<div style='width:50%; float:left;'>
														Quantity: <select name='Qty'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<input type='hidden' name='servicefee' value="1000">
													<input type='hidden' name='licensefee' value="2000">
													<input type='hidden' name='traininghrs' value="10" >
												</div>
											<input type="checkbox"  name="description" id="chk15" value="Advanced Viewer" > Advanced Viewer
												<div id="sb15" style="width:100%;">
													<div style='width:50%; float:left;'>
														Years: <select name='Years'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<div style='width:50%; float:left;'>
														Quantity: <select name='Qty'>
																<option value=\"1\">1</option>
																<option value=\"2\">2</option>
																<option value=\"3\">3</option>
																<option value=\"4\">4</option>
																<option value=\"5\">5</option>
															  </select>
													</div>
													<input type='hidden' name='servicefee' value="1200">
													<input type='hidden' name='licensefee' value="1000">
													<input type='hidden' name='traininghrs' value="0" >
												</div>
										</div>
									</div>
									<div style="width: 100%; float:left; clear:both;" class="Minnesota box" >
											<p>Minnesota test 2</p>
									</div>
									<div style="width: 100%; float:left; clear:both;" class="Missouri box">
											<p>Missouri test 3</p>
									</div>
									<div style="width: 100%; float:left; clear:both;" class="Nebraska box" >
											<p>Nebraska test 4</p>
									</div>
									<div style="width: 100%; float:left; clear:both;" class="SouthDakota box">
											<p>SouthDakota test 5</p>
									</div>
									<div id="total_fees"></div>
									<script>
										$(document).ready(function()
									   {
											  //hide all contents
											  $('div[id^=sb]').hide();

										   $('input[id^=chk]').change(function(){

											  // get checkbox index
											  var index = $(this).attr('id').replace('chk','');
											  //show respective contents
											  if($(this).is(':checked'))
												$('#sb'+index).show();
											  else
												$('#sb'+index).hide();
										   });
										
										});
									
										$(document).ready(function() {
										$(".calculate-fees").click(function() {
											var descr = $('input[name="description"]').val();
											var service = $('input[name="servicefee"]').val();
											var years = $('input[name="Years"]').val();
											var license = $('input[name="licensefee"]').val();
											var qty = $('input[name="Qty"]').val();
											if (qty == " "){
												var qty = "1";
											}
											var training = $('input[name="traininghrs"]').val();
											var servicefee = service * years;
											var fees = servicefee + license;
											var total_fees = fees * quantity;
											 $("#total_fees").html(descr + "Sevice Fees: " + service + "Years: " + years + "License Fee: " +license + "Quantity: " + qty + "Training Hours: " + training + "Item Cost: " + total_fees );    
										});
									});
									</script>
								</form>