パソいろ トップ > jQueryでフォームの値をすべて取得する方法

jQueryでフォームの値をすべて取得する方法

jQueryでフォームの値を全て取得する

html

<form id="myform">
    <input type="text" name="mytext" value="sample text." />
    <select name="myselect">
        <option value="1">test1</option>
        <option value="2">test2</option>
        <option value="3">test3</option>
    </select>
</form>


javascript

var $form = $('#myform');
var query = $form.serialize();
var param = $form.serializeArray();
console.log(query);// => "mytext=sample+text&myselect=1"
console.log(param);// => [{name:"mytext",value:"sample text"},...]

フォームの値をまとめて全部取ってこれます。
.serialize()で通常のGET送信のようにパラメーター化されます。
.serializeArray()でそれを配列に分解したものが得られます。
サーバーに送信するにも便利な形になります。

変数名に$(ドルマーク)が付いているのはphpも使う私の誤りではありません。
JavaScriptは$の付く変数名も有効だそうです。
特に$に機能的な意味があるのではなく、jQueryで生成されたオブジェクト変数に$を付けるのはJavaScriptのお作法だそうです。


関連 2013-12-02 12:11:54