Question

我需要以自定义键/值对格式序列化表单。这就是我的HTML代码的样子：

<form name="ltq_frm" id="ltq_frm">
  <table class="table" id="licenses_to_quote">
    <thead>
      <tr>
        <th>License ID</th>
        <th>Quote ID</th>
        <th>Agreement Type</th>
        <th>Customer Site</th>
      </tr>
    </thead>
    <tbody id="licenses_to_quote_body">
      <tr data-id="96">
        <td>
          96
          <input type="hidden" name="license_id" value="96">
        </td>
        <td>
          <input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
      <tr data-id="100">
        <td>
          100
          <input type="hidden" name="license_id" value="100">
        </td>
        <td>
          <input class="hidden-select2-100" type="hidden" name="quote_id" value="">
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
    </tbody>
  </table>
</form>

<button id="subm">
  Click
</button>

这就是我序列化的方式：

$(function() {
  $('#subm').click(function() {
    var sA = $('#ltq_frm').serializeArray();
    var s = $('#ltq_frm').serialize();

    console.log(sA);
    console.log(s);
  });
});

这是“正常工作”，但我得到一个包含四个值的数组作为输出。我想得到类似的东西：

[
    'license_id' => 'quote_id'
]

使用上面的例子：

[
    96  => 249,
    100 => 
]

上述值来自表单上的隐藏元素，名为license_id和quote_id。

我正在检查here，但我无法理解如何将我的值转换为所需的键/值对。

This is我正在与你合作，以防你需要它。

注意：这是一个正在开发中的代码，所以如果你有更好的建议或需要给我一些不同的东西，请继续

Answer 1

我明白了。您需要这样的自定义代码才能执行此操作：

var finalObj = { };
$.each($('form').serializeArray(), function() {
    finalObj[this.name] = this.value;
});

console.log(finalObj);

<强>段

var finalObj = { };
$.each($('form').serializeArray(), function() {
  finalObj[this.name] = this.value;
});

console.log(finalObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="ltq_frm" id="ltq_frm">
  <table class="table" id="licenses_to_quote">
    <thead>
      <tr>
        <th>License ID</th>
        <th>Quote ID</th>
        <th>Agreement Type</th>
        <th>Customer Site</th>
      </tr>
    </thead>
    <tbody id="licenses_to_quote_body">
      <tr data-id="96">
        <td>
          96
          <input type="hidden" name="license_id" value="96">
        </td>
        <td>
          <input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
      <tr data-id="100">
        <td>
          100
          <input type="hidden" name="license_id[]" value="100">
        </td>
        <td>
          <input class="hidden-select2-100" type="hidden" name="quote_id[]" value="">
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
    </tbody>
  </table>
</form>

更新：要获得自定义方式，我还需要进一步更改。在您的问题中，代码有一些不一致之处。我纠正的内容如下：

license_id[]至license_id。
quote_id[]至quote_id。

请遵循一个单一的惯例。

var finalObj = { };
var lastLID = "";
$.each($('form').serializeArray(), function() {
  if (this.name == "license_id")
    lastLID = this.value;
  else (this.name == "quote_id")
    finalObj[lastLID] = this.value;
});

console.log(finalObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="ltq_frm" id="ltq_frm">
  <table class="table" id="licenses_to_quote">
    <thead>
      <tr>
        <th>License ID</th>
        <th>Quote ID</th>
        <th>Agreement Type</th>
        <th>Customer Site</th>
      </tr>
    </thead>
    <tbody id="licenses_to_quote_body">
      <tr data-id="96">
        <td>
          96
          <input type="hidden" name="license_id" value="96">
        </td>
        <td>
          <input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
      <tr data-id="100">
        <td>
          100
          <input type="hidden" name="license_id" value="100">
        </td>
        <td>
          <input class="hidden-select2-100" type="hidden" name="quote_id" value="">
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
    </tbody>
  </table>
</form>

Answer 2

您可以手动映射每一行，获取两个输入，使用第一个作为键，第二个作为值，如下所示

triggerAction

FIDDLE

如何在自定义键/值对中序列化表单？

2 个答案: