克隆select元素提交表单时选中值无法传递的问题求助

我帮你分析一下问题所在，以及对应的修复方案：

核心问题1：PHP代码的变量覆盖导致数据读取错误 #

你在PHP循环里犯了一个常见的变量名冲突错误：

$course = $_POST['course']; // 这里$course是存储所有选中课程的数组
// ...
for($i = 0; $i < count($lim); $i++ ){
    // ...
    $course = $course[$i]; // 这里把$course从数组覆盖成了单个字符串
    // ...
}

第一次循环时，$course会被赋值为数组的第一个元素（原始select的选中值），变成字符串类型。第二次循环开始后，$course[$i]就不再是读取数组的第i个元素，而是读取字符串的第i个字符——这就导致后续克隆行的课程值完全错误，看起来像是克隆的select没提交数据，但实际上是你的PHP代码把数组覆盖了，无法正确读取后续的提交值。

核心问题2：克隆元素的ID重复（非直接影响，但需规范） #

你的原始行有id="mod_table_row"，克隆后的新行也会继承这个ID，而HTML要求页面内ID必须唯一。虽然这不会直接导致表单提交问题，但可能引发其他DOM操作的潜在bug，需要修复。

额外风险：SQL注入漏洞 #

你直接把用户输入拼接到SQL语句中，这是非常危险的做法，很容易被攻击者利用进行SQL注入攻击，必须修复。

完整修复方案 #

1. 修复JavaScript代码（处理重复ID+优化用户体验） #

修改克隆函数，移除重复ID，并重置新行的表单值，避免复制原始行的输入内容：

function insertRow(){
    var row = document.getElementById('mod_table_row');
    var table = document.getElementById('mod_table');
    var newRow = row.cloneNode(true);
    
    // 移除克隆行的重复ID，符合HTML规范
    newRow.removeAttribute('id');
    
    // 重置新行的所有input为空
    const inputs = newRow.querySelectorAll('input');
    inputs.forEach(input => input.value = '');
    
    // 重置select为默认选中状态
    const select = newRow.querySelector('select');
    select.selectedIndex = 0;
    
    table.appendChild(newRow);
}

2. 修复PHP代码（解决变量覆盖+防止SQL注入） #

重新命名变量避免覆盖，同时使用预处理语句确保安全：

<?php
include '../dbcon.php';

// 先校验必要的表单数据是否存在
if(isset($_POST['id_num'], $_POST['lname'], $_POST['fname'], $_POST['mname'], $_POST['course'], $_POST['address'], $_POST['contact'])){
    // 给数组变量起更清晰的名字，避免后续覆盖
    $id_nums = $_POST['id_num'];
    $lastnames = $_POST['lname'];
    $firstnames = $_POST['fname'];
    $middlenames = $_POST['mname'];
    $courses = $_POST['course'];
    $addresses = $_POST['address'];
    $contacts = $_POST['contact'];

    // 确保所有数组长度一致，避免部分数据缺失
    $totalRows = count($id_nums);
    if(count($lastnames) !== $totalRows || count($firstnames) !== $totalRows || 
       count($middlenames) !== $totalRows || count($courses) !== $totalRows || 
       count($addresses) !== $totalRows || count($contacts) !== $totalRows){
        echo '错误：部分行数据不完整，请检查所有输入项';
        exit;
    }

    // 使用预处理语句，彻底避免SQL注入
    $stmt = mysqli_prepare($con, "INSERT INTO tblstudent(id, lname, fname, mname, contact, address, course) 
                                  VALUES (?, ?, ?, ?, ?, ?, ?)");
    // 绑定参数（s代表字符串类型，根据你的字段类型调整）
    mysqli_stmt_bind_param($stmt, "sssssss", $id, $lname, $fname, $mname, $contact, $address, $course);

    $allSuccess = true;
    for($i = 0; $i < $totalRows; $i++ ){
        // 取出当前行的所有数据并去除首尾空格
        $id = trim($id_nums[$i]);
        $lname = trim($lastnames[$i]);
        $fname = trim($firstnames[$i]);
        $mname = trim($middlenames[$i]);
        $contact = trim($contacts[$i]);
        $address = trim($addresses[$i]);
        $course = trim($courses[$i]);

        // 执行插入操作
        if(!mysqli_stmt_execute($stmt)){
            $allSuccess = false;
            echo '第 '.($i+1).' 行插入失败：'.mysqli_error($con);
            break;
        }
    }

    // 清理资源
    mysqli_stmt_close($stmt);
    mysqli_close($con);

    if($allSuccess){
        echo '所有数据已成功保存！';
    } else {
        echo '部分数据插入失败，请检查后重试';
    }
} else {
    echo '错误：缺少必要的表单数据';
}
?>

验证修复效果 #

修复后，你再测试提交表单：

1. 克隆多行并输入内容，选择不同的课程
2. 提交后，所有行的select选中值都会被正确读取并插入到数据库中

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