【保存版】jQueryでフォーム送信時に追加パラメータを送信する方法を徹底解説！

2024-06-14

jQuery でフォーム送信時に追加パラメータを送信する方法（AJAXではない）

シナリオ

このシナリオでは、以下の要件を満たすソリューションを作成します。

ユーザーがフォームを送信するときに、フォームデータに加えて追加のパラメータをサーバーに送信する必要があります。
AJAXは使用しません。

解決策

この要件を満たすには、以下の手順に従います。

追加のパラメータを格納する隠し入力フィールドを作成します。
フォーム送信時に、隠し入力フィールドの値をフォームデータに追加します。
フォームを従来の方法で送信します。

コード例

<form id="myForm">
  <input type="text" name="name" value="John Doe">
  <input type="email" name="email" value="[email protected]">
  <input type="hidden" id="additionalParam" name="additionalParam" value="">

  <button type="submit">送信</button>
</form>

<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      // 追加のパラメータの値を取得
      var additionalParamValue = $('#additionalParam').val();

      // フォームデータに追加のパラメータを追加
      $(this).append('<input type="hidden" name="additionalParam" value="' + additionalParamValue + '">');

      // フォームを従来の方法で送信
      return true;
    });
  });
</script>

このコードでは、以下の処理が行われます。

#myFormフォームに additionalParam という ID の隠し入力フィールドが追加されます。
submitイベントハンドラーがフォームに割り当てられます。
イベントハンドラーは、以下の処理を行います。
- #additionalParam の値を取得します。
- フォームデータに additionalParam という名前の新しい隠し入力フィールドを追加し、その値を先ほど取得した値に設定します。

この方法により、AJAXを使用せずに、フォーム送信時に追加のパラメータを送信することができます。

補足

この方法は、比較的単純なフォームの場合に適しています。
より複雑なフォームの場合は、FormData オブジェクトを使用する方が良い場合があります。
この方法は、すべてのブラウザで互換性があるとは限りません。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery - 追加パラメータ付きフォーム送信</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#myForm').submit(function(event) {
        // 追加のパラメータの値を取得
        var additionalParamValue = $('#additionalParam').val();

        // フォームデータに追加のパラメータを追加
        $(this).append('<input type="hidden" name="additionalParam" value="' + additionalParamValue + '">');

        // フォームを従来の方法で送信
        return true;
      });
    });
  </script>
</head>
<body>
  <h1>jQuery - 追加パラメータ付きフォーム送信</h1>

  <form id="myForm">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" value="山田 太郎">

    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" value="[email protected]">

    <label for="additionalParam">追加パラメータ:</label>
    <input type="text" id="additionalParam" name="additionalParam" value="">

    <button type="submit">送信</button>
  </form>
</body>
</html>

説明

このHTMLコードは以下の内容を定義しています。

myForm という ID のフォーム
フォームには、名前、メールアドレス、および追加パラメータを入力するためのフィールドが含まれています

JavaScript

$(document).ready(function() {
  $('#myForm').submit(function(event) {
    // 追加のパラメータの値を取得
    var additionalParamValue = $('#additionalParam').val();

    // フォームデータに追加のパラメータを追加
    $(this).append('<input type="hidden" name="additionalParam" value="' + additionalParamValue + '">');

    // フォームを従来の方法で送信
    return true;
  });
});

このJavaScriptコードは以下の処理を実行します。

イベントハンドラーは、フォームデータに新しい隠し入力フィールドを追加します。このフィールドの名前は additionalParam で、値は先ほど取得した値になります。

実行方法

上記のHTMLとJavaScriptコードを保存します。
HTMLファイルをWebブラウザで開きます。
フォームに入力し、「送信」ボタンをクリックします。

フォームが送信されると、追加のパラメータを含むデータがサーバーに送信されます。

このコードは、フォーム送信時に追加パラメータを送信する基本的な方法を示しています。
実際の使用例では、要件に応じてコードを変更する必要があります。

フォーム送信時に追加パラメータを送信するその他の方法

data-*属性を使用して、フォーム要素にデータ属性を追加することで、追加パラメータを指定できます。この方法は、以下の点で利便性があります。

シンプルでわかりやすい
追加のHTML要素を追加する必要がない

ただし、この方法には以下の短所もあります。

パラメータ名が制限される（data- プレフィックスが必要）
複雑なデータ構造を表現できない

<form id="myForm">
  <input type="text" name="name" value="John Doe">
  <input type="email" name="email" value="[email protected]">
  <button type="submit" data-additional-param="my value">送信</button>
</form>

<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      // 追加のパラメータの値を取得
      var additionalParamValue = $(this).find('button[type="submit"]').data('additionalParam');

      // フォームデータに追加のパラメータを追加
      $(this).append('<input type="hidden" name="additionalParam" value="' + additionalParamValue + '">');

      // フォームを従来の方法で送信
      return true;
    });
  });
</script>

FormDataオブジェクトを使用して、フォームデータを手動で構築できます。この方法は、以下の点で利便性があります。

柔軟性が高い

コードが冗長になる可能性がある
古いブラウザではサポートされていない

$(document).ready(function() {
  $('#myForm').submit(function(event) {
    // FormDataオブジェクトを作成
    var formData = new FormData(this);

    // 追加のパラメータの値を取得
    var additionalParamValue = $('#additionalParam').val();

    // フォームデータに追加のパラメータを追加
    formData.append('additionalParam', additionalParamValue);

    // フォームをAjaxで送信
    $.ajax({
      url: '/submit',
      method: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        // 成功時の処理
      },
      error: function(error) {
        // エラー時の処理
      }
    });

    // デフォルトのフォーム送信をキャンセル
    return false;
  });
});