将具有相同名称的输入的表单转换为 JSON

Question

我有一个这样的表格，用于收集有关用户汽车的信息：

<form id="car" action="" method="">
    <section class="inputContainer">
        <section class="carInfo">
            <input type="text" name="Make" class="make" />
            <input type="text" name="Model" class="model" />
            <input type="text" name="Year" class="year" />
            <input type="text" name="Color" class="color" />
        </section>
    </section>
    <input type="hidden" name="AllCarData" />
    <a class="addAnotherCar" href="#">Add another car</a>
    <input type="submit" value="Submit" />
</form>

当用户单击“添加另一辆车”链接时，我的 JS 会复制“carInfo”组输入并将其附加到“inputContainer”；创建一组新的表单输入，如下所示：

<form id="car" action="" method="">
    <section class="inputContainer">
        <section class="carInfo">
            <input type="text" name="Make" class="make" />
            <input type="text" name="Model" class="model" />
            <input type="text" name="Year" class="year" />
            <input type="text" name="Color" class="color" />
        </section>
        <section class="carInfo">
            <input type="text" name="Make" class="make" />
            <input type="text" name="Model" class="model" />
            <input type="text" name="Year" class="year" />
            <input type="text" name="Color" class="color" />
        </section>
    </section>
    <input type="hidden" name="AllCarData" />
    <a class="addAnotherCar" href="#">Add another car</a>
</form>

一旦用户单击提交，我想将表单解析为 JSON 对象并将其注入隐藏的输入字段。两辆车的 JSON 应该如下所示：

[{ "Make" : "Mazda" , "Model":  "Protege" , "Year" : "2002" , "Color" : "Red" } , { "Make" : "Toyota" , "Model":  "Camery" , "Year" : "2012" , "Color" : "Blue" }]

我目前正在获取输入的名称作为键，输入的值作为值。我构建了以下功能：

CreateJson: function () {
        $.fn.serializeObject = function()
        {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };

        var carDataString = JSON.stringify($('.inputContainer input').serializeObject());
        console.log(carDataString);
        $("input[name='AllCarData']").val(carDataString);
    }

};

********唯一的问题是，由于当用户选择添加另一辆车时重复的附加输入使用相同的“名称”，所以我的 JSON 只输出一组值而不是多个值（当添加多辆汽车时）。 http://jsfiddle.net/njacoy/jLopamk7/

注意：我正在使用 jQuery 验证插件来验证此表单。它设置为查找输入名称。

谢谢！

Answer 1

试试这个 -

 $.fn.serializeObject  = function (data) {
        var els = $(this).find(':input').get();
        if (typeof data != 'object') {
            // return all data
            data = {};
            $.each(els, function () {
                if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type))) {
                    data[this.name] = $(this).val();
                }
            });
            return data;
        }
    };


$("#car").submit(function () {
    var data = [];
    $(this).find(".inputContainer section").each(function () {
       data[data.length] = $(this).serializeObject();
    })
    var carDataString=JSON.stringify(data);
    console.log(carDataString);
    $("input[name='AllCarData']").val(carDataString);
    return false
});

这是工作小提琴http://jsfiddle.net/vikrant47/jLopamk7/4/

Answer 2

您将分别序列化每个部分中的输入，然后将它们作为数组获取并在其上使用stringify：

var carDataString = JSON.stringify(
  $('.inputContainer section').map(function(i, o){
    return o.find('input').serializeObject();
  }).get()
);