表示表单上的Body-Parser处理复选框阵列

i具有带有复选框数组（使用[]命名）的HTML表单。我需要能够使用 Express 处理此操作。我正在使用 Body-Parser 。

问题在于，未选中的复选框不提交值，与此同时， body-parser 似乎通过简单地将值包装到阵列中，以删除数组中的"孔"指数，但忽略了索引本身。（更新：实际上看起来像 QS 是罪魁祸首）。

考虑此完整示例，该示例显示了表单并用提交数据的JSON转储响应：

安装：

npm install express body-parser

index.js：

var express = require("express");
var site = express();
site.use(require("body-parser").urlencoded({extended:true}));
site.get("/", function (req, res) {
    res.sendFile(__dirname + "/test.html");
});
site.post("/form", function (req, res) {
    res.json(req.body);
});
site.listen(8081);

test.html：

<html>
    <body>
        <form method="post" action="/form">
            <input type="checkbox" name="option[0]" value="1">
            <input type="checkbox" name="option[1]" value="1">
            <input type="checkbox" name="option[2]" value="1"><br>
            <input type="text" name="text[0]"><br>
            <input type="text" name="text[1]"><br>
            <input type="text" name="text[2]"><br>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

在该示例中，如果我仅检查option[1]，我通过检查Chrome中的请求正确设置了索引，主体为：

option[1]:1
text[0]:
text[1]:
text[2]:

然而，身体偏好器倒塌了option数组，并在req.body中产生以下内容：

{"option":["1"],"text":["","",""]}

如您所见，text具有全部三个，但是option只有一个项目。同样，如果我要检查 option[0]和 option[2]，请求主体看起来像：

option[0]:1
option[2]:1
text[0]:
text[1]:
text[2]:

，但会解析为：

{"option":["1","1"],"text":["","",""]}

我丢失了有关检查哪个复选框的所有信息。

我的问题是，我该怎么做？我想发生的是，例如：

使用checkbox[1]检查：

{"option":[null,"1",null],"text":["","",""]}

使用checkbox[0]和checkbox[2]检查：

{"option":["1",null,"1"],"text":["","",""]}

我实际上没有嫁给null和"1"，我只需要虚假和真相。

另外，重要的是，我不要丢失有关在数组中中应有多少复选框的信息。例如，如果我要给每个复选框一个唯一的值，我想我可以将"option":["0","1"]转换为布尔值数组，除了我会失去一个数组的大小3（在这种情况下为第三值False）的知识） - 尽管我想我可以添加例如诸如numberOfCheckboxes=3之类的隐藏输入，但是...这种映射很麻烦，如果可能的话，我想避免使用。

我的方法在客户端不需要JavaScript。将隐藏的字段与您的复选框一样多，并使用相同的名称

添加隐藏字段

Body Parser将以数组和字符串为单位分析项目

我的意思是

<input type="hidden" name="option[0]" value="0">
<input type="hidden" name="option[1]" value="0">
<input type="hidden" name="option[2]" value="0">
<input type="checkbox" name="option[0]" value="1">
<input type="checkbox" name="option[1]" value="1">
<input type="checkbox" name="option[2]" value="1">

如果检查了您的选项[1]，则身体解析器将像

那样解析

{option:['0', ['0', '1'], '0']}

这是修饰符

req.body.option = req.body.option.map(item => (Array.isArray(item) && item[1]) || null);

所以现在身体将是

{option: [null, '1', null]}

最简单的解决方案（不是最好的）是，您可以添加带有不同ID的隐藏输入，然后在页面上的Check-box中进行检查。

。

<input type="checkbox" name="option[0]" value="1">
<input type="checkbox" name="option[1]" value="1">
<input type="checkbox" name="option[2]" value="1">
<input type="checkbox" class="hidden" name="hiddenOption[0]" value="1">
<input type="checkbox" class="hidden" name="hiddenOption[1]" value="1">
<input type="checkbox" class="hidden" name="hiddenOption[2]" value="1">

和提交之前：

$('input[name^=option]').each(function () {      
  if(!this.checked) {
    var name = "input[name='hiddenOption" + this.name.replace('option', '') + "']";
    console.log(name);
    $(name).prop('checked', true);
  }
});

然后根据您可以找出哪些未勾选的。

https://plnkr.co/edit/mjcbtgqnqudhgruzaz3a?p=preview

相关内容

最新更新

热门标签：