はじめに

フォームを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メソッドを使えば、簡単にフォームの値を取得できました。