如何通过Ajax在PHP中插入多个同名输入框的值

首先，你当前的问题在于使用 .val() 方法只能获取到第一个匹配元素的值，而动态添加的多个同名输入框需要以数组形式收集所有值。下面是分步解决方案：

步骤1：修改HTML输入框的name属性为数组格式 #

将动态生成的 menuin 和 menueng 输入框的name属性改为 menuin[] 和 menueng[]（如果每组输入都有独立的navid，也需要改为 navid[]）。这样浏览器会自动将多个同名输入的值整理为数组：

<tr>
    <th>ID</th>
    <td><input type="number" id="navid"></td> <!-- 若为全局统一ID则保留单个，若每组独立则改为name="navid[]" -->
</tr>
<tr>
    <th>Menu IN</th>
    <td><input type="text" name="menuin[]"></td>
</tr>
<tr>
    <th>Menu ENG</th>
    <td><input type="text" name="menueng[]"></td>
</tr>

步骤2：修改JavaScript代码收集所有输入值并发送Ajax请求 #

使用jQuery的 .map() 方法收集所有输入框的值为数组，过滤空值后发送到后端：

$("#submit").click(function(){
    var navid = $("#navid").val().trim(); // 全局统一ID的情况
    // 若每组有独立navid，则改为：
    // var navidArr = $("input[name='navid[]']").map(function(){ return $(this).val().trim(); }).get();
    
    var menuinArr = $("input[name='menuin[]']").map(function(){
        return $(this).val().trim();
    }).get();
    
    var menuengArr = $("input[name='menueng[]']").map(function(){
        return $(this).val().trim();
    }).get();

    // 过滤空值，避免插入空行
    menuinArr = menuinArr.filter(val => val !== "");
    menuengArr = menuengArr.filter(val => val !== "");

    // 验证输入合法性
    if(!navid || menuinArr.length === 0 || menuengArr.length === 0){
        alert("请填写完整的菜单信息");
        return;
    }

    $.ajax({
        url: 'insert_nav.php',
        type: 'post',
        data: {
            navid: navid, // 若为独立ID则改为 navid: navidArr
            menuin: menuinArr,
            menueng: menuengArr
        },
        success: function(data){
            alert(data);
            $('#nav')[0].reset(); // 重置表单
        },
        error: function(xhr, status, error){
            console.error("请求错误：", error);
            alert("数据插入失败，请稍后重试");
        }
    });
});

步骤3：修改PHP代码实现批量插入 #

在后端接收数组格式的参数，通过循环执行预处理语句完成批量插入（复用预处理语句提升性能）：

<?php
// 假设$con是已建立的数据库连接
if (isset($_POST["navid"]) && !empty($_POST["navid"]) 
    && isset($_POST["menuin"]) && is_array($_POST["menuin"]) 
    && isset($_POST["menueng"]) && is_array($_POST["menueng"])) {

    $navid = $_POST["navid"];
    $menuinArr = $_POST["menuin"];
    $menuengArr = $_POST["menueng"];

    // 验证数组长度一致，避免数据不匹配
    if(count($menuinArr) !== count($menuengArr)){
        echo "错误：菜单信息数量不匹配";
        exit;
    }

    // 预处理插入语句（仅需准备一次）
    $query1 = $con->prepare("INSERT INTO menu(cid, title, en_title) VALUES (:navid, :menuin, :menueng)");
    $query1->bindParam(':navid', $currentNavid);
    $query1->bindParam(':menuin', $currentMenuin);
    $query1->bindParam(':menueng', $currentMenueng);

    $insertCount = 0;
    foreach($menuinArr as $index => $currentMenuin){
        $currentMenueng = $menuengArr[$index];
        $currentNavid = $navid; // 全局统一ID的情况
        
        // 若每组有独立ID，则改为：
        // $currentNavid = $_POST["navid"][$index];
        // if(empty($currentNavid)) continue;

        // 跳过空值
        if(empty($currentMenuin) || empty($currentMenueng)) continue;
        
        $query1->execute();
        $insertCount++;
    }

    if($insertCount > 0){
        echo "成功插入 {$insertCount} 条菜单数据";
    } else {
        echo "没有有效的菜单数据需要插入";
    }
} else {
    echo "无效的输入数据";
}
?>

额外注意事项 #

• 确保动态添加输入框时，新生成的元素name属性也是 menuin[] 和 menueng[]，否则无法被正确收集为数组。
• 可以根据需求添加更多前端验证（如输入格式检查），提升用户体验。
• 预处理语句已经有效防止SQL注入，无需额外转义参数。

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