Real time sum every on change and how to process it with ajax php mysql

Question

First of all, i hope u guys would to read it untill the end. I really need help for my problem cuz i've been search for it and still have no idea.

Based on that picture, the first 'Product & Total Product' element is static in add-order.php file. And the second 'Product & Total Product' element is created by clicking the plus button. Here's the code:

let counter = 1;
$("#add-button").click(function () {    
    event.preventDefault(); 
    counter++;
    let newSubjectField =  `<div class="row" id="products${counter}">
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="product_id${counter}">Product</label>
                                        <select class="form-control" name="product_id[]" id="product_id${counter}">
                                            <option value="">Pilih</option>
                                            <?php
                                                $sql = mysqli_query($con, "SELECT * FROM product ORDER BY id ASC");
                                                while($data = mysqli_fetch_array($sql)){
                                            ?>
                                            <option value="<?php echo $data['id']; ?>"><?php echo $data['name']; ?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="total_product${counter}">Total Product</label>
                                        <input type="number" class="form-control total_product${counter}" name="total_product[]" id="total_product${counter}" placeholder="Jumlah" />
                                    </div>
                                </div>
                            </div>`;
    $('#form-products').append(newSubjectField);
});

So, my problem is I couldn't show total price from all product there. In that picture, total price is only show the 1st Product's price * its quantity (Ex: 15000 * 3 = 45000). I want when I type the quantity of second product, the total price is change in real time, shows the total of all products (Ex: (1st Product's price * its quantity) + 2nd Product's price * its quantity ).

Anyway, it's not always have two product like the example in that picture. It might have more than it depending on how many plus button clicked. So, i want the Total Price always change its value everytime i choose the next product + its quantity.

Here are what i've did so far:

$('.total_product').on('keyup', function(){
    var data_total = $('#product_id').val(); 
    var total_product = $('.total_product').val();
    console.log(total_product);
    $.ajax({
        type: 'get',
        url: 'ajax-total.php',
        data: {
            'data_total': data_total,
            'total_product': total_product,
        },
        success: function(data){
            var json = data,        
            obj = JSON.parse(json);
            console.log(data);
            $('#total').val(obj.total);        
        }
    });
});

<?php
    include '../connection.php';

    $data_total = $_GET['data_total'];
    $total_product = $_GET['total_product'];
    $query = mysqli_query($connection, "SELECT sale_price FROM product WHERE id='$data_total'");
    $row = mysqli_fetch_assoc($query);

    $total = (int)$row['sale_price'] * (int)$total_product;

    $data = array(
            'total'   =>   $total);
            
     echo json_encode($data);
?>

I hope you guys would to help me for this issue. Thank you so much in advance.

Answer 1

You can try to show the price on change of the select box if there are multiple boxes.

like create a method to calculate the pricing, I am assuming you have price column in you table in products.. ---

-- while add the add button try this code ---
let counter = 1;
$("#add-button").click(function () {    
    event.preventDefault(); 
    counter++;
    let newSubjectField =  `<div class="row" id="products${counter}">
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="product_id${counter}">Product</label>
                                        <select class="form-control product-name" name="product_id[]" id="product_id${counter}" onChange="calPrice()">
                                            <option value="">Pilih</option>
                                            <?php
                                                $sql = mysqli_query($con, "SELECT * FROM product ORDER BY id ASC");
                                                while($data = mysqli_fetch_array($sql)){
                                            ?>
                                            <option value="<?php echo $data['id']; ?>" data-price="<?php echo $data['price']; ?>"><?php echo $data['name']; ?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="total_product${counter}">Total Product</label>
                                        <input type="number" class="form-control total_product${counter}" name="total_product[]" id="total_product${counter}" placeholder="Jumlah" />
                                    </div>
                                </div>
                            </div>`;
    $('#form-products').append(newSubjectField);
});

and then use js code to get the price ---

function calPrice(){
  var totalPrice = 0;
$(".product-name").each(function(i,v){
   totalPrice += $(v).find('option:selected').data('price');
});

//then show the price in the box --
$("#total_price").val(totalPrice);
}

Lets check if it works for you....