how to put the result into database

thelee · 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;
}

xenLiam · 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.

thelee · May 26, 2013

how i can put the hidden input ?

DavidAM · 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.

thelee · May 27, 2013

how can i do the price calculation server-side ? can someone teach me please

jeapie · 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.

DavidAM · 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.

Sign In

how to put the result into database

Recommended Posts

thelee

Link to comment

Share on other sites

xenLiam

Link to comment

Share on other sites

thelee

Link to comment

Share on other sites

DavidAM

Link to comment

Share on other sites

thelee

Link to comment

Share on other sites

jeapie

Link to comment

Share on other sites

DavidAM

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information