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 · Answer 1 · 2019-11-15T07:50:51.750

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>

Serialize form using SerializeJSON

1 Answers1