PHP结合Ajax提交表单复选框值出现Undefined index报错如何解决？

问题原因 #

你遇到的报错是三个问题共同导致的：

• 前端渲染checkbox的代码中，name属性书写错误，缺失了等号，浏览器无法正确识别字段名
• JS提交FormData时，误用checkbox的value作为提交键名，没有使用预设的test_delete[]作为键，服务端无法匹配到对应参数
• 服务端未对无选中项的情况做兼容，用户如果没勾选任何选项时也会触发索引不存在报错

修正方案 #

1. 修正前端PHP渲染部分的name属性 #

把原来的name"test_delete[]"改为name="test_delete[]"，修正后的循环代码：

foreach ($testData as $key => $id) {
    # print IDs
    echo '<input class="formVal" type="checkbox" name="test_delete[]" value="'.$id.'" >';
}

2. 修正JS提交部分的FormData拼接逻辑 #

把append的第一个参数改为元素的name属性，也就是test_delete[]，修正后的JS代码：

function addSubmitData()
{
    var elements = document.getElementsByClassName("formVal");
    var formData = new FormData(); 
    for(var i=0; i<elements.length; i++)
    {
        // 获取选中的值
        if (elements[i].checked) {
            // 用元素的name作为提交键，不要用value当键
            formData.append(elements[i].name, elements[i].value);
        }
    }
    var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                alert(xmlHttp.responseText);
            }
        }
        xmlHttp.open("post", "server.php"); 
        xmlHttp.send(formData); 
}

3. 服务端增加无选中项兼容 #

可以用??运算符给默认空数组，避免未定义索引报错：

<?php
// 没有选中项时默认赋值空数组
$_IDs = $_POST["test_delete"] ?? [];
print_r($_IDs);
?>

修改后只要有勾选的选项，服务端就能拿到对应值的数组，没有勾选也不会报错，返回空数组。

内容的提问来源于stack exchange，提问作者Chris Shabani Muswamba