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

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

示例检查它：

与默认设置不同：

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

有没有一种简单的方法可以只用HTML/JS来实现这一点

---

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

如果您正在讨论表单数据，这可能是一个解决方案：

名称 标签 电话

---

注意试试这个脚本，它应该给出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>

---

请根据保单在此处提供密码。如果您愿意，您也可以链接到fiddle。您是否尝试将表单数据或JSON作为post请求的主体？

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

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

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