多字段表单提交时复选框值错位及Undefined数组键报错问题

问题现象 #

• 多字段表单提交到MySQL时，复选框值出现错位：首次提交的1被错误分配，其余值为0
• 触发报错：Warning: Undefined array key 1 in C:\xampp\htdocs\panel_gastos\v1.3\ingreso_problemas.php on line 97
• 页面界面：
  
• 数据库结果异常：第一条数据预期recurrente=1、resuelto=0，实际存储值不符：
  

核心原因 #

1. 复选框提交规则限制：HTML中未勾选的复选框不会向后端提交值，导致Recurrente[]和Solucionado[]数组长度比Prob[]短，循环时出现数组键不存在的报错
2. 字段命名不一致：静态行里的Solucionado隐藏字段是name="Solucionado"（无数组后缀），动态行里是Solucionado[]，提交后数据结构混乱
3. 默认值缺失：未给未勾选的复选框设置默认0值，后端无法将复选框值与每一行数据对应

修复步骤 #

1. 修正前端复选框结构（静态+动态行） #

给每个复选框前添加同名数组的隐藏字段，确保无论是否勾选，都会提交对应行的0值；勾选时复选框的1会自动覆盖隐藏字段的0：

• 静态行修改：

<td>
  <input type="hidden" name="Recurrente[]" value="0"/>
  <input class="primary" type="checkbox" name="Recurrente[]" value="1">
</td>
<td>
  <input type="hidden" name="Solucionado[]" value="0">
  <input type="checkbox" name="Solucionado[]" value="1">
</td>

• 动态行JS代码同步修改：

var html = `
  <tr>
    <td>
      <input class="form-control" type="text" name="Prob[]" required="">
    </td>
    <td>
      <input type="hidden" name="Recurrente[]" value="0"/>
      <input class="primary" type="checkbox" name="Recurrente[]" value="1">
    </td>
    <td>
      <input class="form-control" type="text" name="KPI[]" >
    </td>
    <td>
      <input type="date" name="Fecha[]" required="">
    </td>
    <td>
      <input type="hidden" name="Solucionado[]" value="0">
      <input type="checkbox" name="Solucionado[]" value="1">
    </td>
    <td>
      <input class="btn btn-danger" type="button" name="remove" value="remove">
    </td>
  </tr>`;

注意：移除动态行里重复的id="remove"（HTML要求id唯一），改用name="remove"绑定事件。

2. 后端代码添加安全校验+SQL注入防护 #

循环时先判断数组键是否存在，不存在则赋值默认值，同时改用预处理语句避免SQL注入：

if (isset($_POST['save'])){
    $createtime = date('Y-m-d'); // 修正日期格式，适配MySQL
    $usr = $_SESSION["username"];
    $ceco = $_SESSION['ceco'];
    $problema = $_POST['Prob'];
    // 初始化数组，避免未提交时报错
    $recurrente = isset($_POST['Recurrente']) ? $_POST['Recurrente'] : [];
    $kpi_sol = $_POST['KPI'];
    $fecha_sol = $_POST['Fecha'];
    $solucionado = isset($_POST['Solucionado']) ? $_POST['Solucionado'] : [];

    foreach($problema as $key=>$value){
        // 给未提交的字段设置默认值
        $rec_val = isset($recurrente[$key]) ? $recurrente[$key] : 0;
        $sol_val = isset($solucionado[$key]) ? $solucionado[$key] : 0;
        $kpi_val = isset($kpi_sol[$key]) ? $kpi_sol[$key] : '';
        $fecha_val = isset($fecha_sol[$key]) ? $fecha_sol[$key] : '';
        
        // 预处理语句防止SQL注入
        $stmt = $bdd->prepare("INSERT INTO incidentes_cecos(fecha_creacion, usr, ceco, problema, recurrente, KPI_sol, fecha_evento, resuelto)
                              VALUES(?, ?, ?, ?, ?, ?, ?, ?)");
        $stmt->execute([$createtime, $usr, $ceco, $value, $rec_val, $kpi_val, $fecha_val, $sol_val]);
    };
}

3. 修正事件绑定逻辑 #

把动态行的删除按钮事件绑定修改为：

$('#table-field').on('click','input[name="remove"]' ,function(){
    $(this).closest('tr').remove();
    x--;
});

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