thelee Posted May 25, 2013 Share Posted May 25, 2013 hello.sorry im quite noob in js, the calculation result is including js,so i do not know how to put the calculation result into database,can someone help me,here is the coding <!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>Cake Form</title> <script type="text/javascript" src="js/formcalculations.js"></script> <link href="styles/cakeform.css" rel="stylesheet" type="text/css" /> </head> <body onload='hideTotal()'> <div id="wrap"> <form action="" id="cakeform" onsubmit="return false;"> <div> <div class="cont_order"> <fieldset> <legend>Make your cake!</legend> <label >Size Of the Cake</label> <label class='radiolabel'><input type="radio" name="selectedcake" value="Round6" onclick="calculateTotal()" />Round cake 6" - serves 8 people ($20)</label><br/> <label class='radiolabel'><input type="radio" name="selectedcake" value="Round8" onclick="calculateTotal()" /> Kancil 60 </label> <br/> <label class='radiolabel'><input type="radio" name="selectedcake" value="Round10" onclick="calculateTotal()" /> Waja 100 </label> <br/> <label class='radiolabel'><input type="radio" name="selectedcake" value="Round12" onclick="calculateTotal()" /> </label> Ferrari 1000 <br/> <br/> <label ></label> <select id="filling" name='filling' onchange="calculateTotal()"> <option value="None">Select Filling</option> <option value="1">1 Day</option> <option value="2">2 Days</option> <option value="3">3 Days</option> <option value="4">4 Days</option> <option value="Raspberry">Raspberry($10)</option> <option value="Pineapple">Pineapple($5)</option> <option value="Dobash">Dobash($9)</option> <option value="Mint">Mint($5)</option> <option value="Cherry">Cherry($5)</option> <option value="Apricot">Apricot($</option> <option value="Buttercream">Buttercream($7)</option> <option value="Chocolate Mousse">Chocolate Mousse($12)</option> </select> <br/> <p> <label for='includecandles' class="inlinelabel"> </label> </p> <p> <label class="inlinelabel" for='includeinscription'></label> </p> <div id="totalPrice"></div> </fieldset> </div> <div class="cont_details"> <fieldset> <legend>Contact Details</legend> <label for='name'>Name</label> <input type="text" id="name" name='name' /> <br/> <label for='address'>Address</label> <input type="text" id="address" name='address' /> <br/> <label for='phonenumber'>Phone Number</label> <input type="text" id="phonenumber" name='phonenumber'/> <br/> </fieldset> </div> <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" /> </div> </form> </div><!--End of wrap--> </body> </html> //Set up an associative array //The keys represent the size of the cake //The values represent the cost of the cake i.e A 10" cake cost's $35 var cake_prices = new Array(); cake_prices["Round6"]=20; cake_prices["Round8"]=60; cake_prices["Round10"]=100; cake_prices["Round12"]=1000; //Set up an associative array //The keys represent the filling type //The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9 //We use this this array when the user selects a filling from the form var filling_prices= new Array(); filling_prices["None"]=0; filling_prices["1"]=1; filling_prices["2"]=2; filling_prices["3"]=3; filling_prices["4"]=4; filling_prices["Raspberry"]=10; filling_prices["Pineapple"]=5; filling_prices["Dobash"]=9; filling_prices["Mint"]=5; filling_prices["Cherry"]=5; filling_prices["Apricot"]=8; filling_prices["Buttercream"]=7; filling_prices["Chocolate Mousse"]=12; // getCakeSizePrice() finds the price based on the size of the cake. // Here, we need to take user's the selection from radio button selection function getCakeSizePrice() { var cakeSizePrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the cake the user Chooses name=selectedCake": var selectedCake = theForm.elements["selectedcake"]; //Here since there are 4 radio buttons selectedCake.length = 4 //We loop through each radio buttons for(var i = 0; i < selectedCake.length; i++) { //if the radio button is checked if(selectedCake[i].checked) { //we set cakeSizePrice to the value of the selected radio button //i.e. if the user choose the 8" cake we set it to 25 //by using the cake_prices array //We get the selected Items value //For example cake_prices["Round8".value]" cakeSizePrice = cake_prices[selectedCake[i].value]; //If we get a match then we break out of this loop //No reason to continue if we get a match break; } } //We return the cakeSizePrice return cakeSizePrice; } //This function finds the filling price based on the //drop down selection function getFillingPrice() { var cakeFillingPrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedFilling = theForm.elements["filling"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 cakeFillingPrice = filling_prices[selectedFilling.value]; //finally we return cakeFillingPrice return cakeFillingPrice; } //candlesPrice() finds the candles price based on a check box selection function candlesPrice() { var candlePrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includecandles" var includeCandles = theForm.elements["includecandles"]; //If they checked the box set candlePrice to 5 if(includeCandles.checked==true) { candlePrice=5; } //finally we return the candlePrice return candlePrice; } 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="cakeform" var theForm = document.forms["cakeform"]; //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; } //finally we return the inscriptionPrice return inscriptionPrice; } function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var cakePrice = getCakeSizePrice() * getFillingPrice() ; //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Total Price $"+cakePrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; } #wrap{ width:400px; margin:0 auto; text-align:left; margin-top:8px; padding:5px; background:#fff; font-family:AvenirLTStd, Arial, Helvetica, sans-serif; font-size:13px; line-height:16px; } #wrap .cont_details fieldset,.cont_order fieldset{ margin:10px; padding:20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } #wrap legend{ font-size:16px; font-family:Georgia, "Times New Roman", Times, serif; color:#000; font-weight:bold; font-style:italic; padding-bottom:10px; } #wrap .cont_details input{ margin-bottom:10px; color:#000; } #wrap .input1:hover,.input1:active{ } #wrap label{ display:block; font-size:12px; color:#000; font-weight:bold; } #wrap label.inlinelabel { display:inline; } #wrap .cont_order input{ margin-bottom:5px; } #wrap .cont_order p{ padding-top:5px; } #wrap input[type="radio"] { margin-top:8px; margin-bottom:8px; } #wrap input[type="text"]:hover, #wrap input[type="text"]:active { background-color: #FAF398; } #wrap input#submit { margin:10px; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px; } #wrap div#totalPrice { padding:10px; font-weight:bold; background-color:#ff0; } #wrap label.radiolabel { font-weight:normal; display:inline; } Quote Link to comment Share on other sites More sharing options...
xenLiam Posted May 26, 2013 Share Posted May 26, 2013 You would need to use PHP to put data into a database (I am thinking of MySQL). You could assign a hidden <input> area to have a value of the total and then use that so PHP can insert it to a DB. Quote Link to comment Share on other sites More sharing options...
thelee Posted May 26, 2013 Author Share Posted May 26, 2013 how i can put the hidden input ? Quote Link to comment Share on other sites More sharing options...
DavidAM Posted May 26, 2013 Share Posted May 26, 2013 Using a hidden field for critical data is not a good idea. Hidden fields can be modified by the user, so it would be a simple matter to post the form with a "TotalPrice" of $0.01. So I can get it free. You can do calculations with JavaScript for the user's review, but when the form is posted; you must do the Price calculations server-side (PHP) to make sure they are correct. Quote Link to comment Share on other sites More sharing options...
thelee Posted May 27, 2013 Author Share Posted May 27, 2013 how can i do the price calculation server-side ? can someone teach me please Quote Link to comment Share on other sites More sharing options...
jeapie Posted May 27, 2013 Share Posted May 27, 2013 you must write <form action="script.php" .... > and then script.php receives your form submited data in array $_GET[]. So you can access to your data from php and recalculate it (for security) and then easily post it to database. If you leave form's action blank - current page will reload and get your submited data. Quote Link to comment Share on other sites More sharing options...
DavidAM Posted May 27, 2013 Share Posted May 27, 2013 You basically need to write the same calculations in PHP. Have the form post to a script (the same one or a different one), that collects the data from $_POST and does the calculation. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.