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

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 的剃须刀页面中配置它？

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。

Answer 2

试试这个脚本，它应该给出 JSON 结构。

<script>
    function toObject(arr){
        var rv = {};
        for(var i=0; i<arr.length; ++i){
            if(i % 2 == 0){
                rv['name'] = arr[i];
            }else{
                rv['value'] = arr[i];
            }
        }
        return rv;
    }
    $("form").on("submit", function(event){
        event.preventDefault();
        var textInputs = document.body.querySelectorAll('input[type="text"]'),
        nameArr = [],
        phonesArr = [],
        phonesvalArr = [];
        for(i=0; i<textInputs.length; i++){     
            var entry = [],
            inputnameVal = textInputs[i].name,
            inputvalueVal = textInputs[i].value;        
            if(i == 0){
                nameArr.push(inputnameVal);
                nameArr.push(inputvalueVal);    
                nameArr = toObject(nameArr);
                phonesArr.push('phones');           
            }else{
                entry.push(inputnameVal);
                entry.push(inputvalueVal);
                entry = toObject(entry);            
                phonesvalArr.push(entry);           
            }       
            if(textInputs.length == i+1){
                phonesArr.push(phonesvalArr);
                phonesArr = toObject(phonesArr);
                var output = "{"+JSON.stringify(nameArr)+","+JSON.stringify(phonesArr)+"}";
                console.log(output);
            }   
        }

    });

</script>