发送给 ajax 的值不会改变

Question

我有一个 html 打印出多个表单，其中包含数据库中保存的值/标签

<?php

$stmt = $conn->prepare("SELECT * FROM product");

if ($stmt->execute()){

    $result = $stmt->get_result();

    while ($row = $result->fetch_assoc()){

?>

    <div class="col-xl-3 col-md-4 mb-4">

        <div class="card border-bottom-secondary h-100">

            <div class="embed-responsive embed-responsive-16by9">

                <img src="img/<?php echo $img_src; ?>" alt="" class="card-img-top embed-responsive-item">

            </div>

            <div class="card-body">

                <form>

                    <div>

                        <h4 class="text-primary"><?php echo $row['name']; ?></h4>

                    </div>

                    <div>

                        <input type="text" id="name" name="name" value="<?php echo $row['name']; ?>" hidden>

                        <label for="quantity">Qty. </label>

                        <input class="w-25" onclick="this.select();" min="1" name="quantity" value="1" type="number" id="quantity">

                        <button type="button" id="save" onclick="saveTemp()">Add</button>

                    </div>

                </form>

            </div>

        </div>

    </div>

<?php 

    }

}

?>

现在这是我的 saveTemp() 函数，它将它存储在数据库中：

function saveTemp() {

var productName = $('#name').val();

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

//console.log(productName);

//console.log(quantity);

$.ajax({

    type: "POST",

    url: "purchase.php",

    data: {

        product: productName,

        quantity: quantity

    },

    success: function(){

        alert('success');

    }

});

return false;

}

问题是，每当我单击要发送的不同表单时，productName 和 quantity 中的值都不会改变。它们仍然包含第一个打印表单的值。

例子：

假设第一张卡片包含薯条，下一张卡片包含汉堡，即使我点击汉堡上的添加按钮，数据库中插入的值仍然是薯条及其数量，而不是汉堡。

PS。如果有帮助，这是我的简单 purchase.php 脚本。谢谢！

}

Answer 1

您可以使用单独的表单 ID，如下所示...看法<?php$stmt = $conn->prepare("SELECT * FROM product");if ($stmt->execute()){&nbsp; &nbsp; $result = $stmt->get_result();&nbsp; &nbsp; $i = 1; // added&nbsp; &nbsp; while ($row = $result->fetch_assoc()){?>&nbsp; &nbsp; <div class="col-xl-3 col-md-4 mb-4">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card border-bottom-secondary h-100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="embed-responsive embed-responsive-16by9">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="img/<?php echo $img_src; ?>" alt="" class="card-img-top embed-responsive-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form id="saveform<?=$i?>"> <!-- form id added -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="text-primary"><?php echo $row['name']; ?></h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="name" name="name" value="<?php echo $row['name']; ?>" hidden>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="quantity">Qty. </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="w-25" onclick="this.select();" min="1" name="quantity" value="1" type="number" id="quantity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" id="save" onclick="saveTemp(this)">Add</button> <!-- pass 'this' from here-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div><?php&nbsp;&nbsp; &nbsp; $i++; //incremented here&nbsp; }}?>在您的脚本中进行更改...jsfunction saveTemp(these) {var formId = $(these).closest("form").attr("id"); // get form id herevar productName = $('#'+formId+' #name').val(); // assigned form id herevar quantity = $('#'+formId+' #quantity').val(); // assigned form id here//console.log(productName);//console.log(quantity);$.ajax({&nbsp; &nbsp; type: "POST",&nbsp; &nbsp; url: "purchase.php",&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; product: productName,&nbsp; &nbsp; &nbsp; &nbsp; quantity: quantity&nbsp; &nbsp; },&nbsp; &nbsp; success: function(){&nbsp; &nbsp; &nbsp; &nbsp; alert('success');&nbsp; &nbsp; }});return false;}