0

我想使用 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: "", …}

任何帮助将不胜感激。谢谢你 ：）

4

1 回答 1

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>

于 2019-11-15T07:32:49.187 回答