时间戳

首页 > 解决方案 > 如何自动计算价格和数量然后显示结果？AJAX PHP

php - 如何自动计算价格和数量然后显示结果？AJAX PHP

问题描述

我正在创建这个简单的项目，其中包括价格和数量的自动计算，然后仅在两个 < select > 标签被触发、设置或选择后才显示，使用AJAX而不使用提交按钮。我可以实现这一点，但不使用提交按钮不会自动计算和显示它。

这是我的 HTML 代码：

<form method="post">
    <select name="days">
        <option value="2">2 days</option>
        <option value="3">3 days</option>
    </select>
    <select name="persons">
        <option value="2">2 persons</option>
        <option value="4">4 persons</option>
        <option value="6">6 persons</option>
        <option value="8">8 persons</option>
    </select>
</form>

假设在我的数据库中

第 2 天 == 1000

第 3 天 == 2000

这是我在 PHP 中的代码：

if(isset($_POST['submit'])) {

    $days     = $_POST['days'];
    $persons  = $_POST['persons'];

    // get database of the 'price' from rates tbl 
    $sql = "SELECT * FROM rates WHERE duration='$days'";
    $res = mysqli_query($conn,$sql);

        $rates_tbl = mysqli_fetch_assoc($res);

    $rates = $rates_tbl['price'];

    $total_price = ($rates*$persons);

    echo 'total: ' . number_format($total_price) . '.00';

}

我应该使用这种类型的ajax吗？我什至不知道这是否正确。

    <script type="text/javascript"> 
       $.ajax({  
            url:"autocalculate.php",  
            method:"POST"
       }) 
    </script>

标签： phpjqueryhtmlajax

解决方案

如果目标是在屏幕上显示值，您可以使用它。

<form method="post">
<select name="days">
    <option value="2">2 days</option>
    <option value="3">3 days</option>
</select>
<select name="persons">
    <option value="2">2 persons</option>
    <option value="4">4 persons</option>
    <option value="6">6 persons</option>
    <option value="8">8 persons</option>
</select>

和你的 jQuery 脚本

    var readyToCalculate = false;
var optionChanges = 0;
$('select').on('change', function (e) {
   if(readyToCalculate==true){
        calculate();
   } else {
    optionChanges ++;   
    if (optionChanges==2){
    readyToCalculate = true;
    calculate();
    }
   }
});

function calculate(){

var val1 =  parseInt($('select[name=days]').val());
var val2 =  parseInt($('select[name=persons]').val());
var result = (val1 + val2);
$(".results").html(result);
}

推荐阅读