Serialize form using SerializeJSON

Question

I want to serialize my form using SerializeJSON and I have a div which have multiple tab inside and each tab have multiple form. How can i loop inside the div to get the tab and inside each tab I want to get the form so I can serialize it and after that put it inside array according to the desired structure.

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

the desire structure that I want is something like this:

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

I have tried something like this:

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

But when I console log the form, what I got is:

{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: "", …}

Any help would be greatly appreciated. Thank You :)

Twisty · Accepted Answer · 2019-11-15 07:50:51Z

You want to use .each() to iterate each form.

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

You can also improve the results a bit if you want.

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

Example:

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

Collectives™ on Stack Overflow

Serialize form using SerializeJSON

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related