使用SerializeJSON序列化表单

Question

我想使用SerializeJSON序列化我的表单，我有一个div，里面有多个选项卡，每个选项卡都有多个表单。我如何在div内部循环以获得选项卡，在每个选项卡内部我想获得表单，这样我就可以序列化它，然后根据所需的结构将它放入数组中。

<div class="clamp-content">
<div id="tab1">
<form id="materialinfo">
<input name="plateMaterial">
<input name="plateMaxAllowableStressDesignTemperature">
</form>

<form id="defectparam">
<input name="Def_L">
<input name="DefL_2">
</form>
</div>
<div id="tab2">
<form id="materialinfo">
<input name="plateMaterial">
<input name="plateMaxAllowableStressDesignTemperature">
</form>

<form id="defectparam">
<input name="Def_L">
<input name="DefL_2">
</form>
</div>
</div> 

我想要的欲望结构是这样的：

CaseInfo: 
0: {{plateMaterial:"plateMaxAllowableStressDesignTemperature"}, {Def_L: "", DefL_2: ""}
1: {{plateMaterial:"plateMaxAllowableStressDesignTemperature"}, {Def_L: "", DefL_2: ""}

我试过这样的东西：

var designParameter = [];
var form = {};
function save() {
$('.clamp-content').children().each(function () {
$(this).find('form').each(function () {
form = $(this).serializeJSON();
console.log(form)
});
});
} 

但当我控制台记录表格时，我得到的是：

{plateMaterial: "", plateMaxAllowableStressDesignTemperature: "", plateMaxAllowableStressOperatingTemperature: "", plateThickness: "", boltMaterial: "", …}
{Def_L: "", DefL_2: "", Def_D: "", DefD_3: "", DefD_2: "", …}
{plateMaterial2: "", plateMaxAllowableStressDesignTemperature2: "", plateMaxAllowableStressOperatingTemperature2: "", plateThickness2: "", boltMaterial2: "", …}
{Def_L2: "", DefL_22: "", Def_D2: "", DefD_32: "", DefD_22: "", …}

如有任何帮助，我们将不胜感激。谢谢：(

Answer 1

您希望使用.each()来迭代每个表单。

var designParameter = [];
function getFormData(f) {
return $(f).serializeJSON();
}
function saveAllForms(){
var results = [];
$(".clamp-content form").each(function(i, el){
results.push(getFormData(el));
});
return results;
}
designParameter = saveAllForms();
console.log(designParameter);

如果你愿意，你也可以稍微改进一下结果。

function saveAllForms(){
var results = {}, id, d;
$(".clamp-content form").each(function(i, el){
id = $(el).attr("id");
d = getFormData(el);
results[id] = d;
});
return results;
}

示例：

$(function() {
var designParameter = [];
function getFormData(f) {
return $(f).serializeJSON();
}
function saveAllForms() {
var results = [];
$(".clamp-content form").each(function(i, el) {
results.push(getFormData(el));
});
return results;
}
designParameter = saveAllForms();
console.log(designParameter);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
<div class="clamp-content">
<div id="tab1">
<form id="materialinfo">
<input name="plateMaterial">
<input name="plateMaxAllowableStressDesignTemperature">
</form>
<form id="defectparam">
<input name="Def_L">
<input name="DefL_2">
</form>
</div>
<div id="tab2">
<form id="materialinfo">
<input name="plateMaterial">
<input name="plateMaxAllowableStressDesignTemperature">
</form>
<form id="defectparam">
<input name="Def_L">
<input name="DefL_2">
</form>
</div>
</div>