So the system works like this. If the user buys more than RM500 they will get a free shipping fee, else they will be charged RM10 for the order that is less than RM500. The calculations work fine but I’m unsure why does it display another checkout.php page in the output of the calculations. I did the calculation using onChange handler in Javascript, and get the value to send it to the checkout.php using AJAX.

Below is the code for checkout.php where I did all the calculations and also the onChange handler in Javascript, get the value, and send it to PHP using AJAX

    <div class="col-12 mb-3">
  <div class="product-wrapper">
    <p class="pl-2 pt-2">Checkout Infromation</p>
    <p style="color: #696969; font-size: 12px"class="pl-2 pt-2">**Free Delivery for purchase RM500 and above**</p>
    <hr style="border: 0.5px dashed #DBDBDB;">

    <p class="pl-3 pr-3 cat-title text-left">Total <span class="float-right">RM<?php echo number_format($total_price,2); ?></span></p>
    <p class="pl-3 pr-3 cat-title text-left">Discount <span class="float-right">RM0</span></p>
    <p class="pl-3 pr-3 cat-title text-left">Delivery Fee <span class="float-right">RM</span></p>
    <?php
      while ($row = $query->fetch_assoc()) {
        $total_price += $row['cart_price'] * $row['cart_qty'];
        $total_quantity += $row['cart_qty'];
        $grand_total += $total_price;
       ?>
       <?php
     if(isset($_POST["item_deliver_method"])) {
      $haspost = true;
      $item_deliver_method = $_POST["item_deliver_method"]; 
      $delivery_fee=0;
      } else {
       
      $haspost = false;
      $item_deliver_method ="Delivery";

      }
      if($item_deliver_method == "Delivery") {
      if($grand_total < 500) {
        $grand_total += 10;
        $delivery_fee=10.00;
      }
       echo"$grand_total";
      }
      if($haspost) {
     
      exit;
      ?>
      <?php } ?>
    <?php } ?>
    <hr style="border: 0.5px dashed #DBDBDB;">
    <div class="row justify-content-end pl-2 pr-2">
      <div class="col-6 my-auto form-group" style="">
        <p style="text-align: left;">Total</p>
      </div>
      <div class="col-6 my-auto form-group">
      <p id="grand_total"style="text-align: right;">RM<?php echo number_format($grand_total,2); ?></p>
      </div>
    </div>
  </div>
</div>

These is the javascript code in the checkout.php

$(document).ready(function() {
  $("select[name='item_deliver_method']").on("change", function(event) {
    $.ajax({
      url: "checkout.php",
      method: "POST",
      data: {item_deliver_method: this.value},
      success: function (data) {
        $("#grand_total").html(data);
      }
    });
  });
});

But this is the output shown after the "pick-up" option is selected. It shows another checkout page in the Total column of the page

How do I display the result like the expected output shown in the image above but not get the result in the second image?

Source: Ask Javascript Questions