如何将动态添加的表单文本框值分别存入三个数组？

首先要修正一个关键问题：你当前代码里重复使用了fname、mname、lname这些id，HTML中id必须是唯一的，所以添加新表单元素时要去掉id属性，只保留name和class。

步骤1：修正表单添加逻辑 #

修改添加按钮的JS代码，移除重复的id：

$(document).ready(function() {
    $("#add").click(function() {
        const addThis = `
            <div class="row mb-3">
                <div class="col-12">
                    <input type="text" name="fname[]" class="form-control" placeholder="First Name">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12">
                    <input type="text" name="mname[]" class="form-control" placeholder="Middle Name">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12">
                    <input type="text" name="lname[]" class="form-control" placeholder="Last Name">
                </div>
            </div>
        `;
        $("#form1").append(addThis);
    });
});

步骤2：收集数据到三个数组 #

给TEST按钮添加点击事件，批量获取输入框值并存入对应数组：

$(".btn-success").click(function() {
    // 初始化三个空数组
    const fnames = [];
    const mnames = [];
    const lnames = [];

    // 遍历所有名字输入框，过滤空值后存入数组
    $("input[name='fname[]']").each(function() {
        const val = $(this).val().trim();
        val && fnames.push(val);
    });

    $("input[name='mname[]']").each(function() {
        const val = $(this).val().trim();
        val && mnames.push(val);
    });

    $("input[name='lname[]']").each(function() {
        const val = $(this).val().trim();
        val && lnames.push(val);
    });

    // 可打印数组查看结果
    console.log("First Names:", fnames);
    console.log("Middle Names:", mnames);
    console.log("Last Names:", lnames);

    // 后续执行数据提交逻辑
});

步骤3：提交数据到数据库 #

用AJAX将数组发送到后端接口，后端循环处理插入操作。示例AJAX代码：

// 接上述收集数组的代码后添加：
$.ajax({
    url: "你的后端接口地址", // 例如 "submit-data.php"
    method: "POST",
    data: {
        fnames: fnames,
        mnames: mnames,
        lnames: lnames
    },
    success: function(res) {
        alert("数据提交成功");
        // 可选：重置表单
        $("#form1").empty().append(`
            <div class="row mb-3">
                <div class="col-12">
                    <input type="text" name="fname[]" class="form-control" placeholder="First Name">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12">
                    <input type="text" name="mname[]" class="form-control" placeholder="Middle Name">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12">
                    <input type="text" name="lname[]" class="form-control" placeholder="Last Name">
                </div>
            </div>
        `);
    },
    error: function(xhr, status, err) {
        console.error("提交失败:", err);
        alert("数据提交失败，请重试");
    }
});

后端处理示例（PHP） #

后端接收数组后，循环插入数据库：

<?php
// 假设已完成数据库连接
$fnames = $_POST['fnames'];
$mnames = $_POST['mnames'];
$lnames = $_POST['lnames'];

$count = count($fnames);
for ($i = 0; $i < $count; $i++) {
    $fname = mysqli_real_escape_string($conn, $fnames[$i]);
    $mname = mysqli_real_escape_string($conn, $mnames[$i]);
    $lname = mysqli_real_escape_string($conn, $lnames[$i]);
    
    $sql = "INSERT INTO your_table (first_name, middle_name, last_name) VALUES ('$fname', '$mname', '$lname')";
    mysqli_query($conn, $sql);
}

echo "数据插入成功";
?>

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