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

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一个的jsfiddle我用的情况下，你需要它的工作。

注：这是发展的一个代码，这样，如果你有更好的建议或需要给我一些不同的东西继续

Answer 1

您可以手动映射的每一行，得到了两个输入，使用第一个作为密钥和第二的价值，这样

var result = $('#ltq_frm tbody tr').map(function() { 
    var inp = $('input', this), o = {}; 

    o[inp.first().val()] = inp.last().val(); 
    return o; 
}).get(); 

FIDDLE

Answer 2

我明白了。你需要像这样的自定义代码来做到这一点：

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>