jQueryフォーム送信時のボタン特定テクニック：submitイベント、onメソッド、data属性、ベクタ形式イベントを使いこなす

2024-05-16

jQuery でフォーム送信時にどのボタンがクリックされたかを取得する方法

方法 1: submit イベントを使う

最も一般的な方法は、submit イベントを使う方法です。このイベントは、フォームが送信される直前に発生します。以下に、この方法の例を示します。

<form id="myForm">
  <input type="text" name="name">
  <input type="submit" value="送信1">
  <input type="submit" value="送信2">
</form>

<script>
$(document).ready(function() {
  $("#myForm").submit(function(event) {
    // クリックされたボタンの値を取得
    var clickedButtonValue = $(event.originalEvent.submitter).val();
    alert("クリックされたボタンの値: " + clickedButtonValue);

    // デフォルトの送信動作を無効化 (必要に応じて)
    event.preventDefault();
  });
});
</script>

この例では、submit イベントハンドラの中で、event.originalEvent.submitter プロパティを使って、クリックされたボタンを取得しています。このプロパティは、送信されたフォーム内の送信ボタン要素を返します。その後、val() メソッドを使って、ボタンの値を取得しています。

方法 2: on() メソッドを使う

別の方法として、on() メソッドを使って、特定のボタンの click イベントにイベントハンドラを割り当てる方法があります。以下に、この方法の例を示します。

<form id="myForm">
  <input type="text" name="name">
  <input type="submit" id="submitButton1" value="送信1">
  <input type="submit" id="submitButton2" value="送信2">
</form>

<script>
$(document).ready(function() {
  $("#submitButton1").on("click", function() {
    alert("送信ボタン1がクリックされました");
  });

  $("#submitButton2").on("click", function() {
    alert("送信ボタン2がクリックされました");
  });
});
</script>

この例では、on() メソッドを使って、submitButton1 と submitButton2 ボタンの click イベントにイベントハンドラを割り当てています。それぞれのイベントハンドラの中で、クリックされたボタンが分かるようにアラートを表示しています。

補足

上記の例では、送信ボタンの type 属性を submit に設定しています。これは、ボタンがフォーム送信時に送信されるようにするためです。
event.preventDefault() メソッドを使って、デフォルトの送信動作を無効化することができます。これは、フォーム送信後に JavaScript で処理を実行したい場合に役立ちます。
複数の送信ボタンがある場合、それぞれのボタンに対して個別にイベントハンドラを割り当てる必要があります。

これらの方法を参考に、状況に応じて適切な方法を選択してください。

サンプルコード：jQuery でフォーム送信時にどのボタンがクリックされたかを取得する方法

方法 1: submit イベントを使う

<!DOCTYPE html>
<html>
<head>
  <title>フォーム送信時にクリックされたボタンを取得</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="myForm">
    <input type="text" name="name" placeholder="名前を入力">
    <input type="submit" value="送信1">
    <input type="submit" value="送信2">
  </form>

  <script>
    $(document).ready(function() {
      $("#myForm").submit(function(event) {
        // クリックされたボタンの値を取得
        var clickedButtonValue = $(event.originalEvent.submitter).val();
        alert("クリックされたボタンの値: " + clickedButtonValue);

        // デフォルトの送信動作を無効化 (必要に応じて)
        // event.preventDefault();
      });
    });
  </script>
</body>
</html>

説明

HTML コードで、id="myForm" のフォームを作成します。フォームには、テキスト入力フィールドと 2 つの送信ボタンが含まれています。
script タグ内で、jQuery ライブラリをロードします。
$(document).ready() 関数内で、submit イベントハンドラを #myForm フォームに割り当てます。
submit イベントハンドラ内で、event.originalEvent.submitter プロパティを使って、クリックされたボタンを取得します。
val() メソッドを使って、ボタンの値を取得し、アラートで表示します。
コメントアウトされた event.preventDefault(); 行は、デフォルトの送信動作を無効化します。フォーム送信後に JavaScript で処理を実行したい場合は、この行を解除してください。

方法 2: on() メソッドを使う

<!DOCTYPE html>
<html>
<head>
  <title>フォーム送信時にクリックされたボタンを取得</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="myForm">
    <input type="text" name="name" placeholder="名前を入力">
    <input type="submit" id="submitButton1" value="送信1">
    <input type="submit" id="submitButton2" value="送信2">
  </form>

  <script>
    $(document).ready(function() {
      $("#submitButton1").on("click", function() {
        alert("送信ボタン1がクリックされました");
      });

      $("#submitButton2").on("click", function() {
        alert("送信ボタン2がクリックされました");
      });
    });
  </script>
</body>
</html>

HTML コードは 方法 1 と同じです。
$(document).ready() 関数内で、#submitButton1 と #submitButton2 ボタンの click イベントに個別にイベントハンドラを割り当てます。
それぞれのイベントハンドラ内で、クリックされたボタンが分かるようにアラートを表示します。

この 2 つの例は、基本的な動作を示しています。実際の状況に合わせて、コードを適宜変更してください。

jQuery でフォーム送信時にどのボタンがクリックされたかを取得するその他の方法

1. data- 属性を使う*

各送信ボタンに data-* 属性を追加し、ボタンの値を格納することができます。以下に、この方法の例を示します。

<form id="myForm">
  <input type="text" name="name" placeholder="名前を入力">
  <input type="submit" data-button-value="送信1" value="送信1">
  <input type="submit" data-button-value="送信2" value="送信2">
</form>

<script>
$(document).ready(function() {
  $("#myForm").submit(function(event) {
    // クリックされたボタンの data-button-value 属性を取得
    var clickedButtonValue = $(event.originalEvent.submitter).data("button-value");
    alert("クリックされたボタンの値: " + clickedButtonValue);

    // デフォルトの送信動作を無効化 (必要に応じて)
    // event.preventDefault();
  });
});
</script>

HTML コードで、各送信ボタンに data-button-value 属性を追加します。この属性には、ボタンの値を格納します。
submit イベントハンドラ内で、data("button-value") メソッドを使って、クリックされたボタンの data-button-value 属性値を取得します。

カスタムイベントを使う

フォーム送信時にカスタムイベントを発生させ、そのイベントにクリックされたボタンの情報を渡すことができます。以下に、この方法の例を示します。

<form id="myForm">
  <input type="text" name="name" placeholder="name">
  <input type="submit" id="submitButton1" value="送信1">
  <input type="submit" id="submitButton2" value="送信2">
</form>

<script>
$(document).ready(function() {
  $("#myForm").submit(function(event) {
    // クリックされたボタンを特定
    var clickedButton = $(event.originalEvent.submitter);

    // カスタムイベントを発生
    $(document).trigger("buttonClicked", { button: clickedButton });

    // デフォルトの送信動作を無効化 (必要に応じて)
    // event.preventDefault();
  });

  $(document).on("buttonClicked", function(event, data) {
    var clickedButton = data.button;
    var buttonValue = clickedButton.val();

    alert("クリックされたボタンの値: " + buttonValue);
  });
});
</script>

submit イベントハンドラ内で、クリックされたボタンを特定し、$(document).trigger("buttonClicked", { button: clickedButton }); を使ってカスタムイベントを発生させます。
$(document).on("buttonClicked", function(event, data) { ... }); 関数で、カスタムイベントハンドラを定義します。このハンドラは、クリックされたボタンの情報を含むイベントデータを受け取ります。

jQuery 1.19 以降では、submit イベントにベクタ形式のイベントデータを渡すことができます。このイベントデータには、クリックされたボタンの情報が含まれています。以下に、この方法の例を示します。

<form id="myForm">
  <input type="text" name="name" placeholder="名前を入力">
  <input type="submit" value="送信1">
  <input type="submit" value="送信2">
</form>

<script>
$(document).ready(function() {
  $("#myForm").submit(function(event) {
    // クリックされたボタンの値を取得
    var clickedButtonValue = event.originalEvent.submitter.value;
    alert("クリックされたボタンの値: " + clickedButtonValue);

    // デフォルトの送信動作を無効化 (必要に応じて)
    // event.preventDefault();
  });
});
</script>