在使用 ajax 更改输入时，仅第一行不适用

Question

当我尝试更改数量然后我想根据那个更新总价...使用 ajax 但只有第一行有效，所有其他行无效。 Ajax 请求仅适用于第一行，不适用于其他行。

购物车页面：

数据库结构：

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代码

$("#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();
    }

Answer 1

是的，因为您使用了 id 并且它从第一行获取元素。您应该使用 class 而不是 id:

id="pid" 更改为 class="pid"
id="itemQty" 更改为 class="itemQty" 等等

并从当前行中取出元素。像这样：

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

在使用 ajax 更改输入时，仅第一行不适用

On changing input using ajax only 1st row works not all

php

ajax

jquery

shopping-cart