複数のフォームがあり、フォームのシリアル化された配列を処理しています。複数のフォームをシリアル化したオブジェクトを配列に渡す方法Jquery
期待:
- 私は一時的なオブジェクトを作成する必要があると私はそのオブジェクトに私のフォームの値のすべての値を渡す必要があります。
このコードでは、tempオブジェクトtmpObj
を作成しました。すべての反復フォームの値をtmpObjの下のフィールドにプッシュしようとしています。
tmpObjには、フィールド1とフィールド2のような複数の属性があり、firstnameとlastnameのような属性を持っています。
このtmpObjをitems
アレイにプッシュする必要があります。
私のフォームにはfirstnameとlastnameがあります。このフォームを繰り返し、firstnameとlastnameの値を取得する必要があります。オブジェクトにプッシュする必要があり、オブジェクトをアイテム配列にプッシュする必要があります。
しかし、シリアル化配列を実行している場合は、firstnameまたはlastnameのいずれかをプッシュできます(firstnameフィールドのみ)。
予想される出力:
{
"items": [
{
"fieldset": {
"field1": {
"firstName": "abc",
"lastName": "def"
}
},
"field2": {
"firstName": "abc",
"lastName": "def"
}
},
{
"fieldset": {
"field1": {
"firstName": "ghi",
"lastName": "jkl"
}
},
"field2": {
"firstName": "ghi",
"lastName": "jkl"
}
}
]
}
これは私が試したものです:
HTML:
<form id="f1" class="forms">
<div class="f-grp">
<label for ="fn1">First Name</label>
<input type="text" name="fn1" id="fn1" />
</div>
<div class="f-grp">
<label for ="ln1">First Name</label>
<input type="text" name="ln1" id="ln1" />
</div>
</form>
<form id="f2" class="forms">
<div class="f-grp">
<label for ="fn2">First Name</label>
<input type="text" name="fn2" id="fn2" />
</div>
<div class="f-grp">
<label for ="ln2">Last Name</label>
<input type="text" name="ln2" id="ln2" />
</div>
</form>
<button type="submit" id="submit">Submit</button>
JS:
$(document).ready(function(){
$('#submit').click(function(){
setFormObj();
});
});
var setFormObj = function(){
var self = this;
self.myObj = {};
myObj.items = [];
self.tmpObj = {
fieldset: {
field1: {
firstName: "",
lastName: ""
}
},
field2: {
firstName: "",
lastName: ""
}
};
$('.forms').each(function(fKey, fValue){
var _serArr = $(this).serializeArray();
$(_serArr).each(function(sKey, sValue){
var value = sValue.value;
tmpObj.transferOldNumberInfo.addressfields.firstName = value;
});
});
}