发送给 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()){

    $result = $stmt->get_result();

    $i = 1; // added

    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 id="saveform<?=$i?>"> <!-- form id added -->

                    <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(this)">Add</button> <!-- pass 'this' from here-->

                    </div>

                </form>

            </div>

        </div>

    </div>

<?php 

    $i++; //incremented here

  }

}

?>

在您的脚本中进行更改...

js

function saveTemp(these) {

var formId = $(these).closest("form").attr("id"); // get form id here

var productName = $('#'+formId+' #name').val(); // assigned form id here

var quantity = $('#'+formId+' #quantity').val(); // assigned form id here

//console.log(productName);

//console.log(quantity);

$.ajax({

    type: "POST",

    url: "purchase.php",

    data: {

        product: productName,

        quantity: quantity

    },

    success: function(){

        alert('success');

    }

});

return false;

}