How to calculate total shipping fee using jquery select box change?

user_13597649 0
Viewed 394

So the system works like this. If the user buy more than 500usd they will get free shipping fee, else they will be charged 10usd for order that is less than 500usd.

So my problem here is there are two options for the user to choose to receive their item. One is “self pick up” the other one is “delivery “

How do I make my system to change the way of calculating the total amount according to the drop down values. Because if the user choose “self pick” up the delivery fee should be set to 0 usd automatically.

I did the calculations with php for now. So when the order is less than 500usd it will automatically add 10usd to the total price. Below is the php code for the calculations.

 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');

How can I use jQuery select box change method do the calculations according to my problem that I explained above??

php jquery javascript
3 Answers

if you use a normal post form to do the calculation, simply give the select a name, then in php get it with $_POST['name'];

if you rather want to do the calculation each time the user changes the select, apply a onChange Handler in Javascript, get the value and send it to php using AJAX. PHP should then return the total amount, so you can get the value back to Javascript.

user_60579150

You could test this:

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

We add select "shippingway" to let user select his favorite shipping way, 1=self pick, 2=delivery to home, ...

user_9530970

Sure no Problem.This here would be the example using AJAX:

I am assuming your HTML would look something like this:

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

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

then your Javascript would look like this (assuming you have included 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); 
     });

 

 }); 

});

Finally here your PHP File:


$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;
user_60579150
Related