【jQuery】フォームの値をクエリ文字列で取得

jQuery

この記事は最終更新日から1年以上が経過しています。

はじめに

フォームをAjax送信しなければならなかったときに、
フォームの入力値を簡単にすべて取得したかったので調べてみました。

serializeメソッド

結論から言うと、serializeメソッドで簡単にクエリ文字列が取得できました。
以下のようなフォームがあったときには
<form action="/submit" method="post">
  <input type="text" name="id">
  <input type="text" name="name">
  <input type="submit" value="送信">
</form>

serializeメソッドで
$('form').serialize();

クエリ文字列が取得できます。
id=100&name=hoge

特定の要素のみの取得もできます。
$('form > input[name=id]').serialize();
// id=100

serializeArrayメソッドを使えば、配列で取得も可能です。
$('form').serializeArray();
// [{name: "id", value: "1"}, {name: "name", value: "hoge"}]

フォームの送信

このserializeメソッドを使って、以下のようにフォームをAjaxでPOST送信できました。
<form action="/submit" method="post">
  <input type="text" name="id">
  <input type="text" name="name">
  <input type="submit" value="送信">
</form>
 
<script>
$('form').submit(function(e) {
    e.preventDefault(); // HTMLでの送信をキャンセル
    $.post('/submit', $(this).serialize())
        .done(function(data) {
            // 成功時の処理
        })
        .fail(function(data) {
            // 失敗時の処理
        });
});
</script>

まとめ

serializeメソッドを使えば、簡単にフォームの値を取得できました。

jQuery