フォームの内容をjsonにしたい時の、jquery拡張$.fn.serializeObject()

jQueryには入力フォームの内容を文字列で返す $.fn.serialize() や、 配列で返す $.fn.serializeArray()　がありますが、オブジェクト形式で取りたくてけっこー探し回ってやっとたどり着いたのでメモです。

結論

macek/jquery-serialize-object
いろいろ探しまわした結果これがいい。完璧

こんなフォーム要素に配列を綺麗に再現して欲しかった

<form id="contact">
  <input name="user[email]" value="jsmith@example.com">
  <input name="user[pets][]" type="checkbox" value="cat" checked>
  <input name="user[pets][]" type="checkbox" value="dog" checked>
  <input name="user[pets][]" type="checkbox" value="bird">
  <input type="submit">
</form>

.serializeObject — serializes the selected form into a JavaScript object

$('form#contact').serializeObject();
//=> {user: {email: "jsmith@example.com", pets: ["cat", "dog"]}}

.serializeJSON — serializes the selected form into JSON

JSON出力も含まれている

$('form#contact').serializeJSON();
//=> '{"user":{"email":"jsmith@example.com","pets":["cat","dog"]}}'

参考

細かすぎて伝わらないjQuery拡張 (18) “$.fn.serializeObject” – Advent Calendar 2016
jQueryでフォーム内のデータを配列で取り出す
jQuery serializeObject