首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Pug (Jade)和JavaScript的动态表单

使用Pug (Jade)和JavaScript的动态表单
EN

Stack Overflow用户
提问于 2017-04-19 16:13:59
回答 1查看 2.6K关注 0票数 1

我有一个带有一些静态字段的表单,还有一些是动态生成的。

问题是,当我提交表单时,只将静态字段的值返回给Express。在Express上,我检查了如下的值: console.log(req.body);它显示了如下所示:

代码语言:javascript
复制
{ staticfoofield1: '',
  staticfoofield2: '',
  staticfoofield3: '',
  staticfoofield4: '',
  }

这对于静态字段是正确的,但是缺少动态字段!

-->如何返回动态字段的值?

我如何创建动态字段的示例:

Javascript:

代码语言: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!");
            }
        }

帕格(玉石):

代码语言:javascript
复制
        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

路由器:

代码语言:javascript
复制
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;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-12 06:50:06

为了包含在表单提交中,输入需要一个名称和一个值,因为这是与请求一起传递的。您需要将您的代码修改为如下所示:

代码语言:javascript
复制
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';
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43490111

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档