时间戳

首页 > 解决方案 > 发送给 ajax 的值不会改变

javascript - 发送给 ajax 的值不会改变

问题描述

我有一个 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 脚本。谢谢！

<?php
include_once('connect.php');
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $product = $_POST['product'];
    $quantity = $_POST['quantity'];
    $insert = $conn->prepare("INSERT INTO cart (name, quantity) VALUES (?,?)");
    $insert->bind_param("si", $product, $quantity);
    $insert->execute();
    $insert->close();
}

标签： javascriptphpajax

解决方案

您可以使用单独的表单 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;
}

推荐阅读