Question

我正在尝试创建一个表单，用户可以动态地将学生添加到表单中。表单应作为一组学生提交给服务器，每个学生都有名字和姓氏。

期望的结果：

[
  {
    first_name: "Bob",
    last_name: "Smith"
  },
  {
    first_name: "John",
    last_name: "Joe"
  }
]

由于某种原因，下面的代码在提交表单时将所有first_name＆s和所有last_name都放入数组中。指定name="students[][first_name]"似乎并没有为我解决问题。

实际结果：

[
  {
    "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（动态添加学生表单字段）

$(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>');
}

index.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));
});

Answer 1

这可能不是最干净的方式......但它确实有效。想法是HTML包含

<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" />

然后，在click处理程序上，添加新的div后，您可以编辑所有输入，以便正确编制索引。

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]');
});

这会产生此输出：

{
  "students": [
    {
      "first_name": "luke",
      "last_name": "skywalker"
    },
    {
      "first_name": "han",
      "last_name": "solo"
    }
  ]
}

请注意，为了实现此目的，必须使用bodyParser配置extended: true。

app.use(bodyParser.urlencoded({ extended: true }));

Express，Bootstrap中的动态表单字段对象的POST数组

1 个答案: