John Davidson

jquery - Show total based on multiple input using php and mysql


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>
$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 } ?>
<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" />

<script type="text/javascript">
$('#total_product').on('keyup', function(){
var data_total = $('#product_id').val();
var total_product = $('#total_product').val();
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);

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:


Total Price:

$(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();
url: 'get_price.php',
type: 'POST',
data: {productId: productId},
success: function(response) {
total += parseInt(response) * quantity;

PHP (get_price.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.

Rate this post

3 of 5 based on 4677 votes


© 2024 - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us