如何将jQuery动态生成的表单多行数据提交至PHP并入库

问题根源 #

1. HTML结构不规范：表单直接嵌套在<tbody>标签内，浏览器无法正确识别表单包含的所有输入元素，导致仅单行数据被提交。
2. 未设置数组格式的name属性：静态和动态生成的输入框都没有添加name="id[]"、name="name[]"这类数组格式的属性，PHP无法将多个同name的元素解析为数组。
3. 提交逻辑未完成：表单提交事件阻止了默认行为，但未实现实际的提交逻辑，导致数据无法正常传递到后端。

修复后的完整代码 #

1. HTML代码

调整表单结构，让<form>包裹整个表格，并给输入框添加数组格式的name属性：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
  <table>
    <tbody>
      <tr>
        <td><input type="number" name="id[]" class="id" placeholder="Enter ID" /></td>
        <td><input type="text" name="name[]" class="name" placeholder="Enter Name" /></td>
      </tr>
      <tr>
        <td colspan="2">
          <button type="button" class="add-row">Add Row</button>
          <button type="submit" name="submitNewData">Submit</button>
        </td>
      </tr>
    </tbody>
  </table>
</form>

2. jQuery代码

动态生成行时，给新的输入框也添加数组格式的name属性；同时可选择正常提交表单或用AJAX提交：

$(".add-row").click(function(){
  const html = 
      `<tr>
        <td><input type="number" name="id[]" class="id" placeholder="Enter ID" /></td>
        <td><input type="text" name="name[]" class="name" placeholder="Enter Name" /></td>
      </tr>`;
  // 在倒数第二行后插入新行
  $(this).closest("table").find("tbody tr").eq(-2).after(html);
});

// 可选：用AJAX提交（如果需要无刷新提交）
$("form").submit(function(event){
  event.preventDefault();
  const formData = $(this).serialize();
  $.post('', formData, function(response){
    console.log("提交结果：", response);
    // 这里可以添加提交成功后的提示，比如弹出消息或刷新页面
  });
});

若不需要无刷新提交，可直接删除上述submit事件处理代码，让表单以默认方式提交。

3. PHP代码

完善数据校验，确保接收的是合法数组，再循环处理数据（写入数据库时务必做数据清洗）：

<?php
if(isset($_POST["submitNewData"])){
    // 校验数据合法性
    if(
        isset($_POST["id"], $_POST["name"]) 
        && is_array($_POST["id"]) 
        && is_array($_POST["name"]) 
        && count($_POST["id"]) === count($_POST["name"])
    ){
        foreach($_POST["id"] as $index => $id){
            $name = $_POST["name"][$index];
            // 数据清洗（防止SQL注入，示例用htmlspecialchars，实际写入数据库建议用PDO预处理）
            $cleanId = htmlspecialchars(trim($id));
            $cleanName = htmlspecialchars(trim($name));
            
            // 输出测试（实际项目中替换为写入数据库的代码）
            echo $cleanId . " " . $cleanName . "<br/>";

            // 示例：用PDO写入数据库
            // $pdo = new PDO("mysql:host=localhost;dbname=your_db", "user", "password");
            // $stmt = $pdo->prepare("INSERT INTO your_table (id, name) VALUES (?, ?)");
            // $stmt->execute([$cleanId, $cleanName]);
        }
    } else {
        echo "数据格式错误，请检查输入内容";
    }
}
?>

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