勾选复选框删除单个商品/条目功能失效问题排查

尝试通过复选框删除一个或多个商品列表条目，但delete.php无法正常工作。点击Delete按钮时，页面跳转至http://localhost:3000/delete.php?delete=，尝试多种方案均无效，相关代码如下：

index.html 代码 #

<nav>
      <button class="add-btn" id="addBtn"> <a href="product-add.php">ADD</a> </button>
      <form action="delete.php">
      <input  type="hidden" id="delete" name="delete">
         <button type="submit" >Delete</button>
         </form>
    </nav>
  </header>
  <section class="product-list-wrapper">
  <?php foreach ($products as $product) : ?>
      <div class="div-box">
        <table>
          <form action="delete.php">
          <tbody>
          <input id="checkbox" type="checkbox" class="checkbox" name="checkbox[]" value="<?php echo $product['SKU'] ?>"/>
            <?php if ($counter %2 != 0) : ?>
              
              <tr class="content">
                <td><?php echo $product['SKU'] ?></td>
                <td><?php echo $product['Name'] ?></td>
                <td><?php echo $product['Price'] ?></td>
                <td><?php echo $product['Size'] ?></td>
                <td><?php echo $product['Weight'] ?></td>
                <td><?php echo $product['Dimension'] ?></td>
              </tr>
            <?php endif; ?>
          </tbody>
          </form>
        </table>
        </form>
      </div>
  <?php endforeach; ?>
  </section>

delete.php 代码 #

<?php

/** @var $pdo \PDO */

require_once 'database.php';


if(isset($_POST['delete'])) {
    if(isset($_POST['checkbox'])) {
        foreach($_POST['checkbox'] as $checkbox) {
            $statement = $pdo->prepare('DELETE FROM skandi Where sku = :sku');
            $statement->bindParam(':sku', $chechbox);
            $statement->execute();
        }
    }
    header('Location: index.php');
}

 ?>

1. 表单提交方式不匹配 #

当前表单默认用GET方法提交，参数会暴露在URL中，而delete.php判断的是$_POST数据。需要给Delete按钮所在的表单添加method="POST"属性。

2. 复选框与提交表单分离 #

每个商品的复选框被单独包裹在<form>标签里，点击Delete按钮时只会提交它所在的表单，不会携带任何复选框的值。要把所有复选框放到Delete按钮所在的同一个表单内，删除每个商品单独的<form>标签。

3. 隐藏字段delete无值 #

<input type="hidden" name="delete">没设置value，导致$_POST['delete']无法被检测到，需给它设置值，比如value="1"。

4. 变量名拼写错误 #

delete.php里$chechbox是拼写错误，正确应为$checkbox，会导致参数绑定失败，无法执行删除语句。

修正后的代码 #

index.html #

<nav>
    <button class="add-btn" id="addBtn"> <a href="product-add.php">ADD</a> </button>
    <!-- 添加POST方法，并让表单包裹所有复选框 -->
    <form action="delete.php" method="POST">
        <input type="hidden" id="delete" name="delete" value="1">
        <button type="submit">Delete</button>
    </nav>
    </header>
    <section class="product-list-wrapper">
        <?php foreach ($products as $product) : ?>
            <div class="div-box">
                <table>
                    <tbody>
                        <!-- 移除每个商品单独的form标签 -->
                        <input type="checkbox" class="checkbox" name="checkbox[]" value="<?php echo $product['SKU'] ?>"/>
                        <?php if ($counter %2 != 0) : ?>
                            <tr class="content">
                                <td><?php echo $product['SKU'] ?></td>
                                <td><?php echo $product['Name'] ?></td>
                                <td><?php echo $product['Price'] ?></td>
                                <td><?php echo $product['Size'] ?></td>
                                <td><?php echo $product['Weight'] ?></td>
                                <td><?php echo $product['Dimension'] ?></td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        <?php endforeach; ?>
    </section>
    </form> <!-- 闭合主表单 -->

delete.php #

<?php

/** @var $pdo \PDO */

require_once 'database.php';

if(isset($_POST['delete'])) {
    if(isset($_POST['checkbox']) && is_array($_POST['checkbox'])) {
        foreach($_POST['checkbox'] as $checkbox) {
            $statement = $pdo->prepare('DELETE FROM skandi WHERE sku = :sku');
            // 修正变量名拼写错误
            $statement->bindParam(':sku', $checkbox);
            $statement->execute();
        }
    }
    header('Location: index.php');
    exit; // 添加exit确保跳转后不再执行后续代码
}

 ?>

内容的提问来源于stack exchange，提问作者Bork