John Davidson

Message:

I want to show total price from selected products + its quantity. Example: I choose Product 1 for 2 pcs and Product 2 for 3 pcs. Product 1's price is 15000 and Product 2's price 4000. So, if Product 1 is 2 pcs = 15000 * 2 = 30000. And Product 2 is 3 pcs = 4000 * 3 = 12000.
The problem is i just can show the total of first selected product (In this case, the first selected product = Product 1 (2pcs) = 30000). Like this:

The code:

<div class="row">

    <div class="col-xl-6 col-md-6 col-12 mb-1">

        <div class="form-group">

            <label for="product_id">Produk</label>

            <select class="form-control" name="product_id[]" id="product_id">

                <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">Jumlah Produk</label>

            <input type="number" class="form-control" name="total_product[]" id="total_product" placeholder="Jumlah" />

        </div>

    </div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('#total_product').on('keyup', function(){

            var data_total = $('#product_id').val(); 

            var total_product = $('#total_product').val(); 

            console.log(data_total);

            $.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);        

                }

            });

        });

    })

</script>

<?php

    include '../koneksi.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);

?>

How to calculate all the price from all selected product and show it with ajax?

---

My Answer:
Here is an example code using jQuery, PHP, and MySQL to calculate the total price based on multiple selected products and their quantities:

HTML:
html

Product 1
Product 2





Product 1
Product 2




Total Price:


jQuery:
javascript
$(document).ready(function() {
$('.product, .quantity').on('change', function() {
var total = 0;
$('.product').each(function(index) {
var productId = $(this).val();
var quantity = $(this).closest('div').find('.quantity').val();
$.ajax({
url: 'get_price.php',
type: 'POST',
data: {productId: productId},
success: function(response) {
total += parseInt(response) * quantity;
$('#total').text(total);
}
});
});
});
});


PHP (get_price.php):
php
// Connect to MySQL database
$connection = mysqli_connect('localhost', 'username', 'password', 'database');

// Get product ID from POST data
$productId = $_POST['productId'];

// Query to get product price from database
$query = "SELECT price FROM products WHERE id = $productId";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_assoc($result);

// Return product price
echo $row['price'];


In this code, when the user selects a product and changes the quantity, an AJAX request is sent to the `get_price.php` file to get the price of the selected product from the database. The total price is then calculated based on the selected products and their quantities and displayed on the page.