細かすぎて伝わらないjQuery拡張 (18) “$.fn.serializeObject” – Advent Calendar 2016
この記事は賞味期限切れです。(更新から1年が経過しています)
$.fn.serializeObject() は、フォーム要素をシリアライズして、オブジェクトで返す関数です。 jQueryには文字列で返す $.fn.serialize() や、 配列で返す $.fn.serializeArray() がありますが、そのオブジェクト版です。
$.fn.serializeObject()
使い方
<form action="/" id="demo-form">
<input type="text" name="name" value="John">
<input type="text" name="age" value="23">
<input type="radio" name="gender" value="male" checked>
<input type="radio" name="gender" value="female">
</form>
<script>
$("#demo-form").serializeObject();
/* => {
name: "John",
age: 23,
gender: "male"
} */
</script>
複数選択された項目は、値が配列になります。
<form action="/" id="demo-form">
<input type="checkbox" name="color" value="red" checked>
<input type="checkbox" name="color" value="green">
<input type="checkbox" name="color" value="blue" checked>
</form>
<script>
$("#demo-form").serializeObject();
/* => {
color: ["red", "blue"]
} */
</script>
コード
$.fn.serializeObject = function(){
var vars = {};
this.serializeArray().forEach(function(item){
if(item.name in vars){
if(! $.isArray(vars[item.name])){
vars[item.name] = [vars[item.name]];
}
vars[item.name].push(item.value);
return;
}
vars[item.name] = item.value;
});
return vars;
};
$.fn.serializeArray() が返す配列を読んでオブジェクトに変えているだけです。
Formの内容を非同期でPOSTしたい時などに使えるかもしれませんが、それはまた別の関数の話。
コメント