javascript - 如何提交包含相关字段列表的表单？

Question

我想不出更好的标题，但问题是:我有一张用户表单，用户可以有一个或多个电话号码。更多电话字段是通过js脚本添加的，因此电话字段的数量是任意的。我想将这些字段分组到一个唯一的对象列表中。

示例(检查 here ):

<form method="post" action="#" class="container">
  <div class="form-group row">
    <label for="name" class="control-label">Name</label>
    <input type=text name="name" class="form-control" />
  </div>

  <fieldset id="phones" name="phones" class="form-row">
    <div class="form-group col-sm-2 clonable">
      <label for="label" class="control-label">Label</label>
      <input type=text name="label" class="form-control" />
    </div>

    <div class="form-group col-sm-2 clonable">
      <label for="number" class="control-label">Phone</label>
      <input type=text name="number" class="form-control" />
    </div>

    <div class"form-group col-sm-1">
      <input id="btnaddphone" type="button" value="Add" class="btn btn-primary" />
    </div>
  </fieldset>

  <div class="form-group row">
    <input type="submit" value="Submit" class="btn btn-success col-sm-2" />
  </div>
</form>

我想要的是提交此表单，其结构类似于以下 json

{
    {name: "name", value: "..."},
    {name: "phones", value: [
        {name: "label", value: "..."}, {name: "number", value: "..."},
        {name: "label", value: "..."}, {name: "number", value: "..."}, ...
    ]}
}

与默认值不同:

{
    {name: "name", value: "..."},
    {name: "label", value: "..."}, {name: "number", value: "..."},
    {name: "label", value: "..."}, {name: "number", value: "..."}, ...
}

有没有一种简单的方法可以只使用 HTML/JS 来做到这一点？

如果没有，有没有办法在 ASP.NET MVC 的 razor 页面中配置它？

Answer 1

如果您谈论的是表单数据，这可能是一个解决方案:

<form method="post" action="http://foobar.com" class="container">
  <div class="form-group row">
    <label for="name" class="control-label">Name</label>
    <input type=text name="name" class="form-control" />
  </div>

  <fieldset id="phones" class="form-row">
    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Label</label>
      <input type=text name="phones[0][label]" class="form-control" />
    </div>

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Phone</label>
      <input type=text name="phones[0][number]" class="form-control" />
    </div>

    <div class"form-group col-sm-1">
      <input id="btnaddphone" type="button" value="Add" class="btn btn-primary" />
    </div>
  </fieldset>

  <div class="form-group row">
    <input type="submit" value="Submit" class="btn btn-success col-sm-2" />
  </div>
</form>

通知<input name="phones[...][...] /> - 您需要为当前组建立索引(电话标签和号码)并在名称中使用该索引。您最终需要在 DOM 中得到以下内容，其中 N 是添加的手机的当前索引:

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Label</label>
      <input type=text name="phones[0][label]" class="form-control" />
    </div>

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Phone</label>
      <input type=text name="phones[0][number]" class="form-control" />
    </div>

    <!-- N-1 repetitions ... -->

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Label</label>
      <input type=text name="phones[N][label]" class="form-control" />
    </div>

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Phone</label>
      <input type=text name="phones[N][number]" class="form-control" />
    </div>

这是基于 this answer .