bernie1227
Order Form w/current options live total
by , 08-18-2012 at 02:04 AM (22312 Views)
Okey doke,
there haven't been any blogs in a while, so I thought I might have some. It's about a thread I was on (here) in which Williamsun wanted a form which autosummed a price. I ended up coming up with something along these lines.
The idea of this code, is first to set up two associative arrays:Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <title>Surfboard Form</title> <script type="text/javascript"> //Set up an associative array var surf_prices = new Array(); surf_prices["good"]=100; surf_prices["pretty"]=200; surf_prices["very"]=300; surf_prices["epic"]=1000; //Set up an associative array //We use this this array when the user selects a size from the form var size_prices= new Array(); size_prices["None"]=0; size_prices["5 ft"]=100; size_prices["6 ft"]=150; size_prices["7 ft"]=200; size_prices["8 ft"]=250; size_prices["9 ft"]=300; // getsurfboardPrice() finds the price based on the size of the Surfboard. function getsurfboardPrice() { var surfboardPrice=0; //Get a reference to the form id="Surfboardform" var theForm = document.forms["surfboardForm"]; //Get a reference to the Surfboard the user Chooses name=selectedsurf": var selectedsurf = theForm.elements["selectedsurf"]; //Here since there are 4 radio buttons selectedsurf.length = 4 //We loop through each radio buttons for(var i = 0; i < selectedsurf.length; i++) { //if the radio button is checked if(selectedsurf[i].checked) { //set surfboardPrice to value of elected radio button // using the surf_prices array //We get the selected Items value surfboardPrice = surf_prices[selectedsurf[i].value]; //If we get a match then we break out of this loop //No reason to continue if we get a match break; } } //return surfboardPrice return surfboardPrice; } //This function finds the size price based on the //drop down selection function getSurfSize() { var surfSizePrice=0; //Get a reference to the form id="Surfboardform" var theForm = document.forms["surfboardForm"]; //Get a reference to the select id="size" var selectedsize = theForm.elements["size"]; //set Surfboardsize Price equal to value user chose surfSizePrice = size_prices[selectedsize.value]; var clothPrice=0; //Get a reference to the form id="Surfboardform" var theForm = document.forms["surfboardForm"]; //Get a reference to the checkbox id="includeCloth" var includeCloth = theForm.elements["includeCloth"]; //If they checked the box set cloth to 50 if(includeCloth.checked==true) { switch(surfSizePrice){ case size_prices["5 ft"]: clothPrice = 50 break; case size_prices["6 ft"]: clothPrice = 100 break; case size_prices["7 ft"]: clothPrice = 150 break; case size_prices["8 ft"]: clothPrice = 200 break; case size_prices["9 ft"]: clothPrice = 250 break; default: clothPrice = 50 break; } } //return clothPrice return clothPrice; surfSizePrice += clothPrice; // return surfSizePrice return surfSizePrice; } //footstrapPrices() finds foot strap price based on a check box selection function footstrapPrices() { var footstrapPrice=0; //Get a reference to the form id="Surfboardform" var theForm = document.forms["surfboardForm"]; //Get a reference to the checkbox id="includeFootStrap" var includeFootStrap = theForm.elements["includeFootStrap"]; //If they checked the box set footstrapPrice to 5 if(includeFootStrap.checked==true) { footstrapPrice = 50; } //return footstrapPrice return footstrapPrice; } function insciptionPrice() { //This local variable will be used to decide whether or not to charge for the inscription //If the user checked the box this value will be 20 //otherwise it will remain at 0 var inscriptionPrice=0; //Get a refernce to the form id="Surfboardform" var theForm = document.forms["surfboardForm"]; //Get a reference to the checkbox id="includeinscription" var includeInscription = theForm.elements["includeinscription"]; //If they checked the box set inscriptionPrice to 20 if(includeInscription.checked==true){ inscriptionPrice=20; } //return inscription price return inscriptionPrice; } function calculateTotal() { //total price by calling functions var SurfboardPrice = getsurfboardPrice() + getSurfSize() + footstrapPrices() + insciptionPrice(); //display result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Total Price For the Surfboard $"+SurfboardPrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; } </script> </head> <body onload='hideTotal()'> <div id="wrap"> <form action="" id="surfboardForm" onsubmit="return false;"> <div> <div class="cont_order"> <fieldset> <legend>Get a Surfboard!</legend> <label >Type of Surfboard:</label><br /> <label class='radiolabel'><input type="radio" name="selectedsurf" value="good" onclick="calculateTotal()" />good surfboard ($100)</label><br/> <label class='radiolabel'><input type="radio" name="selectedsurf" value="pretty" onclick="calculateTotal()" />pretty good surfboard($200)</label><br/> <label class='radiolabel'><input type="radio" name="selectedsurf" value="very" onclick="calculateTotal()" />very good surfboard($300)</label><br/> <label class='radiolabel'><input type="radio" name="selectedsurf" value="epic" onclick="calculateTotal()" />epic surfboard ($1000)</label><br/> <br/> <label>size</label> <select id="size" name='size' onchange="calculateTotal()"> <option value="None">Select size</option> <option value="5 ft">5 ft($100)</option> <option value="6 ft">6 ft($150)</option> <option value="7 ft">7 ft($200)</option> <option value="8 ft">8 ft($250)</option> <option value="9 ft">9 ft($300)</option> </select> <br/> <p> <label for='includeFootStrap' class="inlinelabel">Include epic Footstrap($50)</label> <input type="checkbox" id="includeFootStrap" name='includeFootStrap' onclick="calculateTotal()" /> </p> <br/> <p> <label for='includeCloth' class="inlinelabel">Include cool cloth($50)</label> <input type="checkbox" id="includeCloth" name='includeCloth' onclick="calculateTotal()" /> </p> <p> <label class="inlinelabel" for='includeinscription'>Include Inscription($20)</label> <input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()" /> <input type="text" id="theinscription" name="theinscription" value="Enter Inscription" /> </p> <div id="totalPrice"></div> </fieldset> </div> <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" /> </div> </form> </div><!--End of wrap--> </body> </html>
and setting a price to each of the array items, so that when they are called via their values:Code://Set up an associative array var surf_prices = new Array(); surf_prices["good"]=100; surf_prices["pretty"]=200; surf_prices["very"]=300; surf_prices["epic"]=1000; //Set up an associative array //We use this this array when the user selects a size from the form var size_prices= new Array(); size_prices["None"]=0; size_prices["5 ft"]=100; size_prices["6 ft"]=150; size_prices["7 ft"]=200; size_prices["8 ft"]=250; size_prices["9 ft"]=300;
a price is set.Code:<select id="size" name='size' onchange="calculateTotal()"> <option value="None">Select size</option> <option value="5 ft">5 ft($100)</option> <option value="6 ft">6 ft($150)</option> <option value="7 ft">7 ft($200)</option> <option value="8 ft">8 ft($250)</option> <option value="9 ft">9 ft($300)</option> </select>
Another interesting part of this script, is the 'epic cloth' part. The idea here, is that Williamsun wanted a part of a script, in which the user could select some special cloth, of which the price would change depending on how long the board is. I ended up doing this by adding it into the function which calculates the price of the length of the board, using a switch/case:
So basically if the epic cloth is selected, the switch/case checks which length is selected, and depending on the selected length, the cloth price changes, the cloth price is then added to the size price.Code:if(includeCloth.checked==true) { switch(surfSizePrice){ case size_prices["5 ft"]: clothPrice = 50 break; case size_prices["6 ft"]: clothPrice = 100 break; case size_prices["7 ft"]: clothPrice = 150 break; case size_prices["8 ft"]: clothPrice = 200 break; case size_prices["9 ft"]: clothPrice = 250 break; default: clothPrice = 50 break; } } //return clothPrice return clothPrice; surfSizePrice += clothPrice;
The final and most important part of the script is adding it all up. I've done this by adding all of the functions to calculate the prices together and then ouputting them to the script.
bernie
Tags:
1'",
1à§à¢%2527%2522
- Categories
- Uncategorized
Go to Profile
Mark as Read
