如何使用 jquery 选择框更改计算总运费？答案

【问题标题】：How to calculate total shipping fee using jquery select box change?如何使用 jquery 选择框更改计算总运费？
【发布时间】：2021-02-21 16:27:50
【问题描述】：

所以系统是这样工作的。用户购买500usd以上免运费，500usd以下需10usd。

所以我的问题是用户有两个选项可以选择接收他们的物品。一种是“自取”，一种是“外送”

如何让我的系统根据下拉值改变计算总金额的方式。因为如果用户选择“自取”，运费应该自动设置为 0 美元。

我现在用 php 进行了计算。所以当订单少于 500usd 时，它会自动在总价中增加 10usd。下面是计算的php代码。

 while ($row = $query->fetch_assoc()) {
  $seller_id = $row['seller_id'];
  $product_id = $row['product_id'];
  $quantity = $row['cart_qty'];
  $quantity_unit = $row['cart_unit'];
  $purchase_price = $row['cart_price'] * $quantity;
  if($purchase_price < 500.00){
        $grand_total += ($row['cart_price'] * $row['cart_qty'])+10.00;
        }else{
          $grand_total += $row['cart_price'] * $row['cart_qty'];
        }
  $order_status = 1;
  $datetime = date('Y-m-d H:i:s');

如何使用jQuery选择框更改方法根据我上面解释的问题进行计算？？

【问题讨论】：

标签： javascript php jquery

【解决方案1】：

如果你使用普通的 post 表单进行计算，只需给选择一个名称，然后在 php 中使用 $_POST['name']; 获取它

如果您希望每次用户更改选择时都进行计算，请在 Javascript 中应用 onChange 处理程序，获取值并使用 AJAX 将其发送到 php。然后 PHP 应该返回总金额，以便您可以将值返回给 Javascript。

【讨论】：

我可以提供代码示例来执行您上面解释的事情吗？

【解决方案2】：

你可以测试一下：

 <?php
 //...
 $grand_total = 0;
 while ($row = $query->fetch_assoc()) {
    $seller_id = $row['seller_id'];
    $product_id = $row['product_id'];
    $quantity = $row['cart_qty'];
    $quantity_unit = $row['cart_unit'];
    $purchase_price = $row['cart_price'] * $quantity;
    $grand_total += $purchase_price;
}
//
// check user shipping select:
//
if(isset($_POST["shippingway"])) {
  $haspost = true;
  $shippingway = $_POST["shippingway"]; 
} else {
    //
    // by default we deliver to home:
    //
  $haspost = false;
  $shippingway = 2;     
}

//
// when deliver to home,
// add 10$ to grand total for a smaller order than 500$:
//
if($shippingway == 2) {
  if($grand_total < 500) {
    $grand_total += 10;
  }
}
//
$order_status = 1;
$datetime = date('Y-m-d H:i:s');
//
if($haspost) {
  echo "grand_total = $grand_total";
  exit;
}
?>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("select[name='shippingway']").on("change", function(event) {
        $.ajax({
          url: location.href,
          method: "POST",
          data: {shippingway: this.value},
          success: function (data) {
            $("#info").html(data);
          }
        });
      });
    });
  </script>
</head>

<body>

<form method="post">
    <select name="shippingway">
        <option value="1">self pick</option>
        <option value="2" selected="selected">delivery to home</option>
    </select>
    
    ...
    
</form>

<div id="info">grand_total = <?php echo $grand_total; ?></div>

</body>
</html>

我们添加选择“shippingway”让用户选择自己喜欢的运输方式，1=自取，2=送货上门，...

【讨论】：

@jacouch。感谢您的代码。但是当我在我的代码中添加上面的代码时。我不确定为什么 AJAX 函数不会停止加载。我可以在这方面获得帮助吗？

【解决方案3】：

当然没问题。这是使用 AJAX 的示例：

我假设你的 HTML 看起来像这样：

<select name="delivery" id="delivery">
<option selected value="pickup">Pickup</option>
<option value="delivery">Delivery</option>
</select>

<p id="grand_total"></p>

那么您的 Javascript 将如下所示（假设您已包含 JQuery）

 $('document').ready(function(ev){


 $('#delivery').on('change',function(ev2){

    // get the value 
    var delivery = $(this).val(); 

    // send to your php file using AJAX 
     $.get("URL TO YOUR PHP FILE?delivery="+delivery, function(data, status){
         // Data contains your grand total you could now display it 
         $('#grand_total').html(data); 
     });

 

 }); 

});

最后是你的 PHP 文件：


$delivery = $_GET['delivery']; 

// I would add variable for this 
$shipping_fee = 0; 


 while ($row = $query->fetch_assoc()) {
  $seller_id = $row['seller_id'];
  $product_id = $row['product_id'];
  $quantity = $row['cart_qty'];
  $quantity_unit = $row['cart_unit'];
  $purchase_price = $row['cart_price'] * $quantity;
  if($purchase_price < 500.00){
        $shipping_fee = 10.00; 
        }else{
          $shipping_fee = 0.00; 
         
        }
   
   // Also Check for the delivery option here 
  if( $delivery == 'pickup') 
  {
    // Shipping Fees should always be 0 
    $shipping_fee = 0.00; 

  } 

  // Finally do the calculation here 
  $grand_total += ($row['cart_price'] * $row['cart_qty'])+$shipping_fee;

}

  $order_status = 1;
  $datetime = date('Y-m-d H:i:s');

  // For your ajax request print and return result 
  echo $grand_total; 
  return $grand_total;

【讨论】：