Mach3.laBlog

細かすぎて伝わらないjQuery拡張 (18) “$.fn.serializeObject” – Advent Calendar 2016

$.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したい時などに使えるかもしれませんが、それはまた別の関数の話。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*