使用Pug (Jade)和JavaScript的动态表单
使用Pug (Jade)和JavaScript的动态表单
提问于 2017-04-19 16:13:59
我有一个带有一些静态字段的表单，还有一些是动态生成的。
问题是，当我提交表单时，只将静态字段的值返回给Express。在Express上，我检查了如下的值: console.log(req.body)；它显示了如下所示：
{ staticfoofield1: '',
staticfoofield2: '',
staticfoofield3: '',
staticfoofield4: '',
}这对于静态字段是正确的，但是缺少动态字段！
-->如何返回动态字段的值？
我如何创建动态字段的示例：
Javascript:
script.
function addAdjustment(){
var i = 1;
if ((document.getElementById("ncolors").value >=1) && (document.getElementById("ncolors").value <=12)){
while (i <= document.getElementById("ncolors").value){
var divElem = document.createElement('div');
divElem.className = 'col-sm-1';
divElem.style.padding = '2px';
var inputElem = document.createElement('input');
inputElem.id = 'Ajuste' + i;
inputElem.setAttribute('placeholder', 'Ajuste' + i);
inputElem.setAttribute('type', 'text');
inputElem.nodeName = 'Ajuste' + i;
inputElem.style.margin = '5px';
groupElem.appendChild(inputElem);
document.getElementById("adjustments").appendChild(groupElem);
i++;
}
}
else{
alert("The number of colors are not correct!");
}
}帕格(玉石)：
div.row
div.col-sm-5
div.col-sm-2
h6 Ajustes Colores
div.col-sm-5
div.row(id="ajustments")
div.row
div.col-sm-4
div.col-sm-2
div.form_group
div.actions
input.button(type="button", value="Add Adjust", onclick="addAdjustment()")
div.col-sm-2
div.form_group
div.actions
input.button(type="button", value="Delete Adjust", onclick="deleteAdjustment()")
div.col-sm-4路由器：
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Tolerancias' });
});
router.post('/', function (req, res) {
console.log("Form Data: " + req.body);
res.send('index');
});
module.exports = router;回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-12 06:50:06
为了包含在表单提交中，输入需要一个名称和一个值，因为这是与请求一起传递的。您需要将您的代码修改为如下所示：
var inputElem = document.createElement('input');
inputElem.id = 'Ajuste' + i;
inputElem.setAttribute('name', 'Ajuste' + i);
inputElem.setAttribute('value', 'Ajuste' + i);
inputElem.setAttribute('placeholder', 'Ajuste' + i);
inputElem.setAttribute('type', 'text');
inputElem.nodeName = 'Ajuste' + i;
inputElem.style.margin = '5px';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43490111
复制相关文章
相似问题
腾讯云开发者
