【保存版】jQueryで動的フォーム作成＆データ送信！隠しフォーム要素活用術

2024-04-16

jQuery で動的に隠しフォーム要素を作成する方法

このチュートリアルでは、jQueryを使用して動的に隠しフォーム要素を作成する方法を説明します。隠しフォーム要素は、ユーザーの入力なしにフォームにデータを格納するために使用できます。これは、ユーザー ID やセッショントークンなどの情報を送信する場合に役立ちます。

手順

以下の HTML コードを作成します。

<button id="submit-button">送信</button>

以下の JavaScript コードを作成します。

$(document).ready(function() {
  $("#submit-button").click(function() {
    // 隠しフォーム要素を作成
    var hiddenField = $('<input type="hidden" name="userId" value="12345">');

    // フォームに追加
    $("#form").append(hiddenField);

    // フォームを送信
    $("#form").submit();
  });
});

このコードは、次のことを行います。

submit-button ボタンがクリックされたときにイベントハンドラーを呼び出します。
隠しフォーム要素を作成します。この要素には、name 属性が userId 、value 属性が 12345 に設定されています。
作成した隠しフォーム要素を form 要素に追加します。
form 要素を送信します。

説明

$('<input type="hidden" name="userId" value="12345">') は、jQuery を使用して新しい <input> 要素を作成します。この要素は type 属性が hidden 、name 属性が userId 、value 属性が 12345 に設定されています。
$("#form").append(hiddenField); は、作成した隠しフォーム要素を form 要素に追加します。
$("#form").submit(); は、form 要素を送信します。

応用例

ユーザー ID やセッショントークンなどの情報を送信する場合。
フォームに動的にデータを追加する場合。
ユーザーの入力なしにフォームを自動的に送信する場合。

注意事項

隠しフォーム要素は、ユーザーにとって目に見えないことに注意してください。
隠しフォーム要素を使用して機密情報を送信する場合は、適切なセキュリティ対策を講じてください。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery - Create hidden form element on the fly</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="form">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">

    <button id="submit-button">送信</button>
  </form>

  <script>
    $(document).ready(function() {
      $("#submit-button").click(function() {
        // 隠しフォーム要素を作成
        var hiddenField = $('<input type="hidden" name="userId" value="12345">');

        // フォームに追加
        $("#form").append(hiddenField);

        // フォームを送信
        $("#form").submit();
      });
    });
  </script>
</body>
</html>

HTML フォームを作成します。このフォームには、name 入力フィールドと submit ボタンが含まれています。

このコードを実行すると、ユーザーが submit ボタンをクリックすると、userId という名前の隠しフォーム要素がフォームに追加され、フォームが送信されます。

このコードは、上記のチュートリアルで説明したのと同じ方法で隠しフォーム要素を作成します。
コードには、コメントが追加されており、各行の処理を説明しています。

jQuery で動的に隠しフォーム要素を作成するその他の方法

方法 1：clone() メソッドを使用する

$(document).ready(function() {
  $("#submit-button").click(function() {
    // 既存のフォーム要素を複製
    var hiddenField = $("#userId").clone();

    // 値を設定
    hiddenField.val("12345");

    // フォームに追加
    $("#form").append(hiddenField);

    // フォームを送信
    $("#form").submit();
  });
});

userId IDを持つ既存のフォーム要素を複製します。
複製した要素の value 属性を 12345 に設定します。

この方法は、既存のフォーム要素を複製して隠しフォーム要素を作成します。
既存のフォーム要素に id 属性が設定されていることが重要です。

方法 2：html() メソッドを使用する

$(document).ready(function() {
  $("#submit-button").click(function() {
    // 隠しフォーム要素を含む HTML 文字列を作成
    var html = '<input type="hidden" name="userId" value="12345">';

    // フォームに追加
    $("#form").append(html);

    // フォームを送信
    $("#form").submit();
  });
});