如何序列化自定義鍵/值對中的表單？

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>