Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

439
Views
Dynamic form with Pug (Jade) and JavaScript

I have a form with some static fields and other are generated dynamicly.

The problem is that when I submit the form only the values of static fields are returned to Express. On Express I check the values like this: console.log(req.body); and it shows something like this:

{ staticfoofield1: '',
  staticfoofield2: '',
  staticfoofield3: '',
  staticfoofield4: '',
  }

This is correct for the static fields but dynamic fields are missing!

--> How can I return the values of dynamic fields?


Example of how I created the dynamic fields:

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!");
            }
        }

Pug (Jade):

        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

Router:

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;
about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

In order to be included in a form submission an input needs a name and a value as that is what is passed with the request. You'll need to modify your code to something like this:

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';
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!