I have a form where a customer gets a gift certificate that has the value of the product (not including taxes) and enters the product number 12345 then selects a ship to address, then has to pay the amount stored in the database to ship the product and add taxes on it and display a total amount.
So I have two points of reference. First is the item lookup done via ajax
<input type="text" size="30" id="item_number" />
<input type="submit" name="submit" class="button" id="submit_btn" value="Search" onClick="showResult(item_number.value)" />
Lets assume the amount returned from the column 'shipping' in mysql table is $10.00 and the amount for the product is $100.
And then I have the second part which pulls the taxes based on a list of provinces that are selected
<div class="right">
<select class="element select medium" input id="ship_province" name="ship_province" onchange="showTax(this.value)">
<option value="" selected="selected"></option>
<option value="bc">British Columbia</option>
<option value="alb">Alberta</option>
<option value="sas">Saskatchewan</option>
<option value="man">Manitoba</option>
<option value="ont">Ontario</option>
<option value="que">Quebec</option>
<option value="nfl">Newfoundland & Labrador</option>
<option value="nov">Nova Scotia</option>
<option value="nwb">New Brunswick</option>
<option value="pei">Prince Edward Island</option>
<option value="ykn">Yukon</option>
<option value="nwt">Northwest Territories</option>
<option value="nun">Nunavut</option>
</select>
<label for="ship_province">Province</label>
</div>
And lets assume the rate returned is 13%.
I can easily return these values in the divs next to the respective fields using this for the item lookup portion
function showResult(str)
{
if (str=="")
{
document.getElementById("description").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("description").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getitem.php?sku="+str,true);
xmlhttp.send();
}
and a similar function for the provinces. The problem I have is 1. displaying these values in another section other than "description" and 2. doing the calculations to the values price,shipping, and tax.
What I'm trying to do is generate a small table where it shows the shipping amount ($10.00),the product price($100.00), the voucher credit (which is just the price of the product),the tax which is calculated on the product price + Shipping.
100 - $item_description
(100) - $voucher_credit
10 - Shipping
13% - Tax
--------
24.30
What I don't know how to do is have all of this processed on the same page before submitting the form with the payment info. I can do this easily in php but i would have to load this to the next page and then run the script. I am not very familiar with ajax.
Any help would be most appreciated
I use javascript instead of ajax, in a fashion similar to this:
<select class="element select medium" input id="ship_province" name="ship_province" onchange="showTax()">
<option value="bc" tax=".13" shipping="5.00">British Columbia</option>
<option value="alb" tax=".10" shipping="10.00">Alberta</option>
</select>
<script type=text/javascript>
function showTax(){
var price=100;
var tax=Number($('#ship_providence option:selected').attr('tax')) * price;
var shipping=Number($('#ship_providence option:selected').attr('shipping'));
alert(price + tax + shipping);
}
</script>
but as i mentioned in the other comment. you need to recalculate server side before adding values to the database. some users will try to cheat.
I didn't understand what your problem exactly is, but the way you could implement this could be like this:
1) The customer make the lookup for the product ( Server returns the product description)
2) The customer choose the province
3) Now make a Ajax call to the server (for example: calculateOrder.php). As parameters you pass the product id, the province.
4) The server returns a result set containing all your desired data (price without tax, tax, shipping price, total price which is calculated by price without tax + tax + shipping). One important thing: Do all calculations on server side, not on client side!!!
5) Display the received result in the browser
6) The user confirm the order by clicking on a button in the browser, and now the browser sends the data (product, province) to the server (to submitOrder.php) . The server do the same as in step 4) but this time, the server stores the order with any needed information in the database. IMPORTANT: Do not pass price and tax from the client to the server. Let the server compute this values, otherwise it would be possible to cheat! For example i could send an order with 0,01$ as price to the server :-)