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

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

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

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

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只输出一组值（当添加多辆车时）

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

---

谢谢

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

stringify

：

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

试试这个-

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

---

如果我是你，我会创建这些数据的对象，但我不确定这是否是最好的解决方案。与其选择

inputContainer input

，不如迭代

carInfo

并为每个对象创建一个单独的对象。这非常有效！但是，有没有办法让它在单击而不是提交时工作？我只是想知道，因为我可能需要对另一个分解为不同步骤的表单执行相同的操作。例如，当用户单击“下一步”按钮转到步骤3时，我想收集表单步骤2上的数据。将click事件与submit事件绑定，例如-而不是$（“#car”）。submit（函数（）{--code-->）do$（“#yourNextButton”）。单击（函数（）{--code-->）。这是小提琴@NickJ如果我的答案适合你的需要，别忘了接受它（你问的其他问题也是如此：）

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

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