When I try to change the number of quantity and then I want to update the total price according to that…using ajax but only first row works and all others rows does not work. Ajax request is only working for 1st rows not for other rows.
Cart Page :
DB Structure :
cart.php
<tbody> <?php require_once 'config.php'; $stmt = $conn->prepare("SELECT * FROM cart"); $stmt->execute(); $result = $stmt->get_result(); $sum = 0; while($row = $result->fetch_assoc()): ?> <tr> <td><?= $row['id'] ?></td> <input id="pid" type="hidden" value="<?= $row['id'] ?>"> <td><img src="<?= $row['product_image'] ?>" width="50"></td> <td><?= $row['product_name'] ?></td> <td>Rs. <?= number_format($row['product_price'],2) ?></td> <input type="hidden" value="<?= $row['product_price'] ?>" id="pprice"> <td><input type="number" class="form-control" value="<?= $row['qty'] ?>" id="itemQty" style="width:75px;"></td> <td>Rs. <?= number_format($row['total_price'],2) ?></td> <td><a href="action.php?remove=<?= $row['id'] ?>" class="badge-danger badge">Remove</a></td> </tr> <?php $sum += $row['total_price']; ?> <?php endwhile; ?> <tr> <td colspan="5"><b>Grand Total</b></td> <td><b>Rs. <?= number_format($sum,2); ?></b></td> <td><a href="#" class="btn btn-info">Checkout</a></td> </tr> </tbody>
ajax code
$("#itemQty").on('change',function(){ var qty = $(this).val(); var pid = $("#pid").val(); var pprice = $("#pprice").val(); location.reload(true); $.ajax({ url: 'action.php', method: 'post', cache: false, data: {qty:qty,pid:pid,pprice:pprice}, success: function(response){ console.log(response); } }); });
action.php
if(isset($_POST['qty'])){ $qty = $_POST['qty']; $pid = $_POST['pid']; $pprice = $_POST['pprice']; $tprice = $qty*$pprice; $stmt = $conn->prepare("UPDATE cart SET qty=?,total_price=? WHERE id=?"); $stmt->bind_param("iis",$qty,$tprice,$pid); $stmt->execute(); }
Advertisement
Answer
Yes, because you use id and it takes element from first row. You should use class instead of id:
- id=”pid” change by class=”pid”
- id=”itemQty” change by class=”itemQty” etc.
And take element from current row. Something like this:
$(".itemQty").on('change',function(){ var $el = $(this).closest('tr'); //Find parent tr element var qty = $(this).val(); var pid = $el.find(".pid").val(); //Find element with class pid in current tr ($el) var pprice = $el.find(".pprice").val(); $.ajax({ url: 'action.php', method: 'post', cache: false, data: {qty:qty,pid:pid,pprice:pprice}, success: function(response){ console.log(response); } }); });