Estoy tratando de crear un formulario donde los usuarios puedan dinámicamente otro estudiante a un formulario. El formulario debe enviarse al servidor como una matriz de estudiantes, cada uno con nombre y apellido.
Resultado deseado:
[ { first_name: "Bob", last_name: "Smith" }, { first_name: "John", last_name: "Joe" } ] Por alguna razón, el código a continuación coloca todos los nombres y apellidos en matrices cuando se envía el formulario. Especificar name="students[][first_name]" no parece resolver el problema para mí.
Resultado real:
[ { "first_name": [ "Bob", "John" ], "last_name": [ "Smith", "Joe" ] } ]HTML
<form class="col-md-5" action="/insert" method="post"> <div class="form-group" id="student-controls"> <div class="student-entry input-group"> <input name="students[][first_name]" class="form-control param-name" type="text"/> <input name="students[][last_name]" class="form-control col-md-2 param-unit-type" type="text"/> <button class="btn btn-success student-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>JS (para agregar dinámicamente campos de formulario de estudiante)
$(document).on('click', '.student-add', function(e) { e.preventDefault(); var controlDiv = $('#student-controls'), currentEntry = $(this).parents('.student-entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlDiv); newEntry.find('input').val(''); controlDiv.find('.student-entry:not(:last) .student-add') .removeClass('student-add').addClass('student-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }índice.js
var express = require('express'); var bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.post('/insert', function(req, res) { console.log(JSON.stringify(req.body.students, null, 2)); });Probablemente esta no sea la forma más limpia... pero funciona. La idea es que el HTML contenga
<input name="students[0][first_name]" class="form-control param-name" type="text" /> <input name="students[0][last_name]" class="form-control col-md-2 param-unit-type" type="text" /> Luego, en el controlador de click , después de agregar un nuevo div , edita todas las entradas para que estén indexadas correctamente.
newEntry.appendTo(controlDiv); $(".student-entry input[name*=first_name]").each(function(i) { $(this).attr('name', 'students[' + i + '][first_name]'); }); $(".student-entry input[name*=last_name]").each(function(i) { $(this).attr('name', 'students[' + i + '][last_name]'); });Esto produce esta salida:
{ "students": [ { "first_name": "luke", "last_name": "skywalker" }, { "first_name": "han", "last_name": "solo" } ] } Tenga en cuenta que para que esto funcione, bodyParser debe configurarse con extended: true .
app.use(bodyParser.urlencoded({ extended: true }));