如何使用循环生成的按钮来调用具有更改参数的函数？

问题描述 投票：0回答：1

我在为不同的订单创建表格时遇到了一个问题，他们各自的产品和产品准备复选框。

我使用一个循环创建了按钮，该循环将调用一个函数来检查复选框并将 SQL 命令发送到数据库。但是，当有多个不同订单ID的订单，但所有按钮显示相同的订单ID和产品总数时，问题就来了。

结果，SQL 命令被发送到相同的项目，即使由于遍历订单 ID 和产品数组的循环，代码中的订单 ID 和产品总量发生了变化。

我无法在互联网上找到任何解决我的问题的方法。我什至尝试使用 ChatGPT，但它无法解决我的问题。

对于我的问题，我将不胜感激。

index.php

<?php
    require_once "process_orders.php";
?>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Commande Client</title>
        <link rel="stylesheet" href="style.css">
        <script src="myscripts.js"></script>
    </head>

    <body>
        <?php
        if ($number_of_orders == 0)
        {
            ?>

            <h1>Aucun panier en cours</h1>

            <?php
        }
        else
        {
            ?>

            <h1>Traitement des paniers</h1>

            <?php

            for ($i = 0; $i < $number_of_orders; $i++) 
            {
                ?>
                <table>
                    <tr>
                        <th colspan="3"><?php echo $customerOrder[$i]->getName(); ?></th>
                    </tr>
                    <tr>
                        <th>Produit</th>
                        <th>Quantité</th>
                        <th><?php echo $customerOrder[$i]->getOrder_date(); ?></th>
                    </tr>
                    <?php

                    for ($j = 0; $j < $customerOrder[$i]->getTotalProducts(); $j++)
                    {
                        $product_name = $customerOrder[$i]->getProductName($j);
                        $customer_products_quantity = $customerOrder[$i]->getProductQuantity($j);
                    
                        ?>
                        <tr>
                            <td><?php echo $product_name; ?></td>
                            <td><?php echo $customer_products_quantity; ?></td>
                            <td><input type="checkbox" name="<?php echo $customerOrder[$i]->getOrder_id();?>"  value="<?php echo $customerOrder[$i]->getProductId($j);?>" id=<?php echo $j?> <?php if($customerOrder[$i]->getProductAvailable($j)) { echo "checked"; } ?>></td>
                        <?php
                    }
                    ?>
                    
                    <tr>
                        <th colspan="3">
                            <button onclick="updateNonManquant(<?php echo $customerOrder[$i]->getOrder_id() ?>, <?php echo $customerOrder[$i]->getTotalProducts() ?>)">Valider</button> <!-- HERE IS THE PROBLEM -->
                        </th>
                    </tr>
                </table>
                
                <br> <br>
                <?php
            }
        }
        ?> 
    </body>
</html>

js文件

function updateNonManquant(order_id, totalProducts) {
    for (let i = 0; i < totalProducts; i++) {
        var xhr = new XMLHttpRequest();

        var url = "db_query.php";
        var sql;

        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var results = JSON.parse(this.responseText);
            }
        };

        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/json");

        var checkbox = document.getElementById(i);
        var id_Products = checkbox.value;
        var button_name = checkbox.name;
        
        alert(button_name + " " + order_id);

        if (button_name == order_id) {
            if (checkbox.checked) {
                sql = `UPDATE article SET non_manquant = 1 WHERE id = ${id_Products} AND num_commande = ${order_id}`;

                xhr.send(JSON.stringify({sql: sql}));
            } else {     
                sql = `UPDATE article SET non_manquant = 0 WHERE id = ${id_Products} AND num_commande = ${order_id}`;
                
                xhr.send(JSON.stringify({sql: sql}));
            }
            alert(id_Products);
        }
    }
    location.reload();
}

db_query 文件

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "site_e-commerce";

$sql = json_decode(file_get_contents("php://input"))->sql;

$link = mysqli_connect($servername, $username, $password, $dbname);
$result = mysqli_query($link, $sql);

if ($result) {
    echo "SQL command executed successfully!";
} else {
    echo "Error executing SQL command: " . mysqli_error($link);
}

mysqli_close($link);
?>

items in the database

javascript php html ajax
1个回答
0
投票

您遇到的问题与所有复选框和按钮具有相同 ID 的事实有关，这使得很难在 JavaScript 函数中区分它们。要解决此问题，您可以尝试以下解决方案：

不使用 ID 属性，而是使用 class 属性来标识循环中的复选框，并根据它们的订单和产品 ID 为它们提供唯一的类名。您可以使用订单 ID 和产品 ID 的串联作为类名，例如：

<input type="checkbox" name="<?php echo $customerOrder[$i]->getOrder_id();?>" value="<?php echo $customerOrder[$i]->getProductId($j);?>" class="<?php echo $customerOrder[$i]->getOrder_id() . '-' . $customerOrder[$i]->getProductId($j); ?>" <?php if($customerOrder[$i]->getProductAvailable($j)) { echo "checked"; } ?>>

在JavaScript函数中，使用类选择器代替ID选择器获取复选框，并使用订单ID和产品ID构造类名：

function updateNonManquant(order_id, totalProducts) {
    for (let i = 0; i < totalProducts; i++) {
        var xhr = new XMLHttpRequest();

        var url = "db_query.php";
        var sql;

        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var results = JSON.parse(this.responseText);
            }
        };

        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/json");

        var checkbox = document.getElementsByClassName(order_id + '-' + (i+1))[0];
        var id_Products = checkbox.value;
        var button_name = checkbox.name;
        
        alert(button_name + " " + order_id);

        if (button_name == order_id) {
            if (checkbox.checked) {
                sql = `UPDATE article SET non_manquant = 1 WHERE id = ${id_Products} AND num_commande = ${order_id}`;

                xhr.send(JSON.stringify({sql: sql}));
            } else {     
                sql = `UPDATE article SET non_manquant = 0 WHERE id = ${id_Products} AND num_commande = ${order_id}`;
                
                xhr.send(JSON.stringify({sql: sql}));
            }
            alert(id_Products);
        }
    }
    location.reload();
}

这样就可以唯一标识每个checkbox，从类名中得到order ID和product ID，可以在SQL查询中使用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.