使用Ajax计算字段

时间:2011-11-15 22:23:04

标签: php javascript mysql ajax

我有一个表单,客户获得具有产品价值的礼品券(包括税收)并输入产品编号12345然后选择要发货的船舶,然后必须付款存储在数据库中的数量,用于运送产品并在其上添加税金并显示总金额。

所以我有两点参考。首先是通过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)" />

让我们假设从mysql表中的'shipping'列返回的金额是10.00美元,产品金额是100美元。

然后我有第二部分根据选定的省份列表提取税款

<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>

我们假设退回率为13%。

我可以轻松地在相应字段旁边的div中返回这些值,使用它来查找项目查找部分

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();
}

和各省的类似功能。我遇到的问题是1.在“描述”以外的其他部分中显示这些值,然后2.对价格,运费和税收进行计算。

我要做的是生成一个小表,其中显示运费($ 10.00),产品价格($ 100.00),凭证信用(只是产品的价格),税是按产品价格+运费计算。

 100 - $item_description
(100) - $voucher_credit
  10 - Shipping
  13% - Tax
--------
24.30

我不知道怎么办是在提交包含付款信息的表单之前将所有这些处理在同一页面上。我可以在php中轻松完成此操作,但我必须将其加载到下一页然后运行脚本。我对ajax不太熟悉。

非常感谢任何帮助

2 个答案:

答案 0 :(得分:3)

我不明白你的问题究竟是什么, 但你实现这个的方式可能是这样的:

1)客户查找产品(服务器返回产品说明)

2)客户选择省

3)现在对服务器进行Ajax调用(例如:calculateOrder.php)。作为参数传递产品ID,省。

4)服务器返回一个包含所有所需数据的结果集(价格不含税,税,运费,总价格,按价格计算,不含税+税+运费)。 一件重要的事情:在服务器端进行所有计算,而不是在客户端进行!!!

5)在浏览器中显示收到的结果

6)用户通过单击浏览器中的按钮立即确认订单 浏览器将数据(product,province)发送到服务器(to submitOrder.php)。服务器执行与步骤4)相同的操作,但这次,服务器将订单与数据库中的任何所需信息一起存储。 重要提示:不要将价格和税收从客户端传递到服务器。让服务器计算这个值,否则就有可能作弊!例如,我可以向服务器发送价格为0,01美元的订单: - )

答案 1 :(得分:2)

我使用javascript而不是ajax,方式类似于:

    <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>

但正如我在其他评论中提到的那样。您需要在向数据库添加值之前重新计算服务器端。一些用户会试图作弊。