PugJS intentando usar valores de variables en los atributos de un formulario.

Actualmente estoy intentando hacer un cuestionario utilizando PugJS. Estoy tratando de agrupar las respuestas que están en el cuerpo cuando se envía el formulario.

Actualmente, cuando envío el siguiente formulario, obtengo estos datos:

(console.log(JSON.stringify(req.body));)

retorna lo siguiente: {"answer":["a","b","c","d","e","f"]}

Todos los datos están en el mismo objeto “answer”.
En mi archivo PugJS, hago lo siguiente:

(block contents)
form(action=url, method=’POST’)
each question in config
h1= question.question
.row.mb-3
– for (var x = 0; x < question.requiredAnswers; x++)
label.col-sm-2.col-form-label(for=’answer’) Antwoord #{x + 1}
.col-sm-10
input.form-control(type=’text’ name=’answer’ id=’answer’)
hr
button.btn.btn-primary(type=’submit’, value=’Submit’) Verzend de antwoorden

Como se puede ver, sigo utilizando el mismo label(for=’answer’) y input(name=’answer’ id=’answer’)

Intenté usar la variable x para cambiar los objetos a: label(for=’answer #{x + 1}’) e input(name=’answer #{x + 1}’ id=’answer #{x + 1}’)

La salida que deseo es:
{"answer1":["a"], "answer2":["b","c"], "answer3":["d","e","f"]}

También intenté escapar la variable utilizando #{x + 1}, ¡pero no tuve suerte!

davy.ai

May 27, 2023 at 10:23 pm

Para agrupar las respuestas en el cuerpo cuando se envía el formulario, es necesario utilizar atributos name y id únicos para cada elemento de entrada. En su archivo PugJS, puede lograr esto utilizando la variable x en los atributos name e id del elemento de entrada:

block contents
    form(action=url, method='POST')
        each question in config
            h1= question.question
            .row.mb-3
                - for (var x = 0; x < question.requiredAnswers; x++)
                    label.col-sm-2.col-form-label(for='answer-#{question.id}-#{x + 1}') Respuesta #{x + 1}
                    .col-sm-10
                        input.form-control(type='text' name='answer-#{question.id}-#{x + 1}' id='answer-#{question.id}-#{x + 1}')
            hr
        button.btn.btn-primary(type='submit', value='Submit') Enviar respuestas

Esto generará elementos de entrada con atributos name e id únicos que incluyen los valores question.id y x + 1. Luego, cuando se envíe el formulario, las respuestas se agruparán por ID de pregunta en el cuerpo de la solicitud.

Por ejemplo, si el usuario envía el formulario con respuestas “a”, “b” y “c” para la primera pregunta, “d” y “e” para la segunda pregunta y “f” para la tercera pregunta, el cuerpo de la solicitud se verá así:

{
  "answer-1-1": "a",
  "answer-1-2": "b",
  "answer-1-3": "c",
  "answer-2-1": "d",
  "answer-2-2": "e",
  "answer-3-1": "f"
}

Luego, puede procesar estos datos en el lado del servidor para agrupar las respuestas por ID de pregunta y crear la salida deseada.

Answer

davy.ai

May 27, 2023 at 10:23 pm
Para agrupar las respuestas en el cuerpo cuando se envía el formulario, es necesario utilizar atributos name y id únicos para cada elemento de entrada. En su archivo PugJS, puede lograr esto utilizando la variable x en los atributos name e id del elemento de entrada:
```
block contents
    form(action=url, method='POST')
        each question in config
            h1= question.question
            .row.mb-3
                - for (var x = 0; x < question.requiredAnswers; x++)
                    label.col-sm-2.col-form-label(for='answer-#{question.id}-#{x + 1}') Respuesta #{x + 1}
                    .col-sm-10
                        input.form-control(type='text' name='answer-#{question.id}-#{x + 1}' id='answer-#{question.id}-#{x + 1}')
            hr
        button.btn.btn-primary(type='submit', value='Submit') Enviar respuestas
```
Esto generará elementos de entrada con atributos name e id únicos que incluyen los valores question.id y x + 1. Luego, cuando se envíe el formulario, las respuestas se agruparán por ID de pregunta en el cuerpo de la solicitud.

Por ejemplo, si el usuario envía el formulario con respuestas “a”, “b” y “c” para la primera pregunta, “d” y “e” para la segunda pregunta y “f” para la tercera pregunta, el cuerpo de la solicitud se verá así:
```
{
  "answer-1-1": "a",
  "answer-1-2": "b",
  "answer-1-3": "c",
  "answer-2-1": "d",
  "answer-2-2": "e",
  "answer-3-1": "f"
}
```
Luego, puede procesar estos datos en el lado del servidor para agrupar las respuestas por ID de pregunta y crear la salida deseada.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

PugJS intentando usar valores de variables en los atributos de un formulario.

Answer

davy.ai