提交带可克隆字段的产品表单仅能获取最后一条数据如何解决

问题根源 #

你当前所有表单项的name属性都是相同的固定值，浏览器提交表单时，同名字段会按出现顺序依次覆盖，最终PHP的$_POST中只会保留最后一个同名字段的值，所以只能拿到最后一条产品数据。

修复步骤 #

1. 修改HTML表单项的name属性 #

将所有产品相关字段的name改为数组格式（末尾加[]），同时移除重复的id属性（id在HTML中必须唯一，重复id会导致label关联、DOM选择异常），修改后的核心表单代码如下：

<form id="myForm" method="post" action="index.php">
<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">Products</h3>
  </div>
  <div class="card-body">
    <div class="modeliai">
      <div class="modelioforma">
        <div class="form-group">
          <label>Model</label>
          <input type="text" class="form-control" placeholder="Model name..." name="model[]">
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label>SKU</label>
              <input type="text" class="form-control" placeholder="SKU..." name="sku[]">
            </div>
          </div>

          <div class="col-sm-2">
            <div class="form-group">
              <label>supplier</label>
              <select class="custom-select rounded-0" name="supplier[]">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
              </select>
            </div>
          </div>
          <div class="col-sm-2">
            <div class="form-group">
              <label>Quantity</label>
              <input type="number" class="form-control" value="1" name="qty[]">
            </div>
          </div>

          <div class="col-sm-2">
            <div class="form-group">
              <label>Price</label>
              <input type="number" step="0.01" class="form-control" placeholder="price..." name="price[]">
            </div>
          </div>
        </div>
        <hr>
      </div>
    </div>
    <div class="col-sm-2">
      <button type="button" class="btn btn-block btn-primary" id="addMore"><i class="fas fa-plus"></i> Add more</button>
    </div>
  </div>
</div>
</form>
<div class="modal-footer justify-content-between">
  <button class="btn btn-primary" type="submit" form="myForm" value="Submit">Submit form</button>
</div>

注：同时修正了原代码中错误的type属性（如原type="model"应为type="text"，数量、价格改为对应number类型更规范）

2. 优化JavaScript克隆逻辑 #

克隆表单块后清空新增块的输入值，避免直接复用原有块的填写内容，提升用户体验：

<script>
$("#addMore").click(function(){   
    const newBlock = $(".modelioforma:last").clone();
    // 清空新增块的输入内容，数量保留默认值1
    newBlock.find('input, select').not('input[name="qty[]"]').val('');
    newBlock.find('input[name="qty[]"]').val(1);
    newBlock.appendTo(".modeliai"); 
});
</script>

3. 修改PHP接收逻辑 #

现在$_POST中每个字段都是数组，遍历数组即可拿到所有产品的数据：

if (!empty($_POST))
{
    // 取出所有字段的数组
    $models = $_POST['model'];
    $skus = $_POST['sku'];
    $suppliers = $_POST['supplier'];
    $qtys = $_POST['qty'];
    $prices = $_POST['price'];

    // 遍历所有产品，长度和字段数组长度一致
    $productCount = count($models);
    for ($i = 0; $i < $productCount; $i++) {
        // 取出单条产品数据
        $model = $models[$i];
        $sku = $skus[$i];
        $supplier = $suppliers[$i];
        $qty = $qtys[$i];
        $price = $prices[$i];

        // 这里可以做数据验证、入库操作，示例为输出
        echo "产品".($i+1)."：<br>";
        echo $model.'<br>';
        echo $sku.'<br>';
        echo $supplier.'<br>';
        echo $qty.'<br>';
        echo $price.'<br><hr>';
    }
}

可选优化 #

可以给每个克隆的表单块添加删除按钮，方便用户误加后删除不需要的产品块。

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