how to get grand total from php using javascript/jquery

Question

Now its 3rd day i am trying to figure out how to get grand total updated when qty changes . i have made it for price and totals this get updated as i change qty but for grand total i am not able to do . here is is my code

  <?php 
                                if(isset($_POST['prod_id'])){
                                    $prod_id =$_POST['prod_id'];
                                    $prod_qty=$_POST['qty'];
                                    $up_cart="UPDATE `cart` SET `qty` = '$prod_qty' WHERE `cart`.`product_id` = '$prod_id'";
                                    $up_cart_run = mysqli_query($conn,$up_cart);
                                    if($up_cart_run){
                                        echo "done";
                                    }

                                }
                                ?>


                                    <?php       


                                        $cart_item_query="SELECT * FROM cart";
                                        $cart_item_run = mysqli_query($conn,$cart_item_query);
                                        if (mysqli_num_rows($cart_item_run)>0){
                                            $grand_total=0;
                                            while($cart_row=mysqli_fetch_array($cart_item_run)){
                                                $pro_id = $cart_row['product_id'];
                                                $pro_qty = $cart_row['qty'];


                                                $product_query="SELECT * FROM products WHERE product_id = '$pro_id'";
                                                $product_run = mysqli_query($conn, $product_query);
                                                $product_row = mysqli_fetch_array($product_run);
                                                $pro_name = $product_row['product_name'];
                                                $pro_image = $product_row['product_image'];
                                                $pro_sell_price = $product_row['sell_price'];
                                                $total = $pro_sell_price*$pro_qty;
                                                $grand_total =$grand_total+ $total;


                                    ?>

                                    <div class="row">

                                        <div class="col-md-3 col-xs-3"><img src="img/<?php echo $pro_image; ?>" alt="" width="50px"></div>
                                        <div class="col-md-3 col-xs-3"><p><?php echo $pro_name; ?></p><a href=""><p><i class="fa fa-trash" aria-hidden="true"></i> Remove</p></a></div>
                                        <div class="col-md-2 col-xs-2">
                                            <select class="change_qty" size="1" style="width:50px;">
                                                <?php
                                                for ($i = 1; $i <= 9; $i++) {
                                                    $selected = $pro_qty == $i? 'selected' : '';
                                                    echo "<option class='qty' data-pro='{$pro_id}' value='{$i}' {$selected}>{$i}</option>";
                                                }
                                                ?>
                                            </select>
                                        </div>

                                        <div class="col-md-2 col-xs-2"><input data-pro="<?php echo $pro_id; ?>" id="price-<?php echo $pro_id; ?>" type="text" value="<?php echo $pro_sell_price; ?>" disabled class="form-control dis-input price"></div>
                                        <div class="col-md-2 col-xs-2"><input id="total-<?php echo $pro_id; ?>" data-pro="<?php echo $pro_id; ?>" type="text" value="<?php echo $total; ?>" disabled class="form-control dis-input total"></div>

                                    </div>

                                    <hr>

                                    <?php

                                            }
                                        }

                                    ?>




                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div id="cart_total"></div>

                                <h3>TOTAL <span class="pull-right" id="grand_total">RS. <?php echo $grand_total;?></span></h3> <br>
                                <a href="" class="btn btn-secondary btn-block">PLACE ORDER</a><br>
                                <h5>ORDER SUMMARY</h5>
                                <P>Total Price <span class="pull-right">RS.50000</span> </P>
                                <P>Discount <span class="pull-right text-success">- Rs.0</span> </P>
                                <P>Sub Total <span class="pull-right">Rs.60000</span> </P>
                                <P>Estimated GST <span class="pull-right">Rs.0</span> </P>
                                <P>Delivery Charges <span class="pull-right">Rs.0</span> </P><hr>
                                <h5>Total Payable <span class="pull-right">RS. 60000</span> </h5>


                            </div>
                        </div>

And here is js

$('body').delegate('.change_qty','change',function(){
         var qty = $(this).val();
        var prod_id = $('option:selected', this).attr('data-pro');
        var price = $('#price-'+prod_id).val();
        var total = qty*price;
        $('#total-'+prod_id).val(total);


        up_cart();
        function up_cart(){
            $.ajax({
                url:'cart.php',
                method:'POST',
                data:{prod_id:prod_id,
                      qty:qty
                     },
                success:function(response){

                }
            });
        }
    });

Now everything is working fine except grand total. grand total updates on page refresh but i want it to update as changes qty like price. Thanks.

Answer 1

You have to create a PHP-File, for example something like "calc_grand_total.php" or so, and use this instead of "cart.php" in your ajax call. In your PHP-File you should calculate the grand total with the parameters which you send to the file and after that you return the grand total of the article. in the success function of the ajax call you can output and refresh the grand total in the cart.php with jQuery.