При изменении ввода с помощью ajax только 1-й ряд работает не все - PullRequest
Новая
       24

При изменении ввода с помощью ajax только 1-й ряд работает не все

0 голосов
/ 29 мая 2019

Когда я пытаюсь изменить количество, а затем я хочу обновить общую цену в соответствии с этим ... используя ajax, но работает только первая строка, а все остальные строки не работают. Ajax-запрос работает только для 1-й строки, а не для других.

Страница корзины:

enter image description here

Структура БД:

enter image description here

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>

Аякс код 

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

1 Ответ

0 голосов
/ 29 мая 2019

Да, потому что вы используете id и он берет элемент из первой строки.Вы должны использовать class вместо id:

  1. id = "pid" изменить на class = "pid"
  2. 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);
        }
    });
});
...