帕格(RIP翡翠)formscheckbox – 无论select多less,只返回一个值

我有一个写在帕格的表格。 我从窗体的POST中获取所有正确的参数,除了我的checkbox数组是一个包含一个值的string – 选定的最后一天。 每个checkbox有一个名称等于一个数组,所以表单应该返回所有选中的checkbox。 但是,这并没有发生。

以下是checkboxselect的相关代码:

form#create-shift-form(action='/shifts/new', method='post') div.form-group p Select which days this shift should apply: div.checkbox-inline input.checkbox-input#create-shift-mon(type='checkbox', name='days[]', value='Mon') label(for='create-shift-mon') Mon div.checkbox-inline input.checkbox-input#create-shift-tue(type='checkbox', name='days[]', value='Tue') label(for='create-shift-tue') Tue div.checkbox-inline input.checkbox-input#create-shift-wed(type='checkbox', name='days[]', value='Wed') label(for='create-shift-wed') Wed div.checkbox-inline input.checkbox-input#create-shift-thur(type='checkbox', name='days[]', value='Thur') label(for='create-shift-thur') Thur div.checkbox-inline input.checkbox-input#create-shift-fri(type='checkbox', name='days[]', value='Fri') label(for='create-shift-fri') Fri div.checkbox-inline input.checkbox-input#create-shift-sat(type='checkbox', name='days[]', value='Sat') label(for='create-shift-sat') Sat div.checkbox-inline input.checkbox-input#create-shift-sun(type='checkbox', name='days[]', value='Sun') label(for='create-shift-sun') Sun 

为什么在表单的POST中没有捕获所有选中的checkbox值? 为什么它只返回最后一个选定值的string,而不是所有选定的值,这是预期的HTML行为?

如果有帮助,我的Node / Express服务器被设置为使用以下几行parsing内容:

 app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); 

根据这个W3C规范 ,我应该能够给每个checkboxinput相同的名称,他们将被parsing为POST数值的数组(参见规范中的示例2)。 我也试过这个,导致与我的问题相同的行为 – 只有最后选定的项目被返回,作为一个string,而不是一个数组。

更新 :我上面的代码的原始设置是正确的。 简单地给每个属性的name字段使用相同的名称将响应组装到一个数组中。 我已经设置了中间件 ,我已经忘记了防止arrays响应作为安全措施。 删除这个库,或者将这个表单POST的路由白名单,允许原来的代码工作没有问题。

经过一些研究后,我发现:

这种传递数组的方法高度依赖于服务器,它将如何理解数据有效载荷,PHP理解此语法,但JSON对象具有不同的安静性。

 form#create-shift-form(action='/shifts/new', method='post') div.form-group p Select which days this shift should apply: each val, index in ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'] div.checkbox-inline input.checkbox-input(type='checkbox', name=`days[${index}]`, value=val, id=`create-shift-${val}`) label(for=`create-shift-${val}`)=val 

这将有效载荷将相当于这样的事情:

 days[0]=Mon days[1]=Tue days[2]=Wed days[3]=Thur days[4]=Fri days[5]=Sat days[6]=Sun 

这相当于json中的这个有效载荷:

 { days: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'] } 

来源: https : //darobin.github.io/formic/specs/json/

更新:

为了将来的参考:OP的问题,解决scheme(days[${index}])是正确的,但express express parser extended:true使用querystring而不是qs

如果extended:false名为extended:false ,则JSON按预期的方式工作。 有效载荷变成"days[0]"="Mon", "day[1]"="Tues", etc.

 app.use(bodyParser.urlencoded({ extended: false }); //instead of true