JavaScript

レシピ

イベント

フォーム送信時に処理を実行する

送信ボタンが押されたときなど、フォームの送信が発生するタイミングで指定した処理を実行する方法を解説します。

この記事のポイント

  • フォームを送信するときはイベント「submit」が発生する
  • EventオブジェクトpreventDefaultメソッドを使うとデフォルトのフォーム送信をキャンセルできる

フォームの送信時に発生するイベントについて

フォームを送信するときはイベント「submit」が発生します。
このイベントはform要素にイベントリスナーを登録することで、送信するタイミングで指定した処理を実行することができるようになります。

ここでは以下のHTMLコードのフォームがあることを前提に解説を進めていきます。
赤字になっている箇所がイベントリスナーを登録するform要素です。

HTMLコード例

<form id="form_recipe" method="post" action="">
  <div>
    <label for="input_name">名前:</label>
    <input type="text" id="input_name" name="input_name" value="">
  </div>
  <input type="submit" name="btn_submit" value="送信">
</form>

続いて、ページが読み込まれたタイミングでform要素にイベントリスナーを登録します。
以下のJavaScriptのコードを使って、イベント「submit」が発生したタイミングで処理を実行します。

コード例

window.addEventListener('DOMContentLoaded', function(){

  // HTML要素を取得
  var form_recipe = document.getElementById("form_recipe");
  
  form_recipe.addEventListener("submit", function(e){
    e.preventDefault();
  
    var input_name = document.getElementById("input_name")
    console.log("Submit: " + input_name.value);
  });
});

ページが読み込まれたタイミングで、まずid属性を使ってform要素を取得して変数form_recipeに入れます。
続いてすぐにaddEventListenerメソッドを使ってイベント「submit」が発生したら処理を実行できるようにイベントリスナーを登録しています。

処理の際に引数で変数eを渡していますが、これはEventオブジェクトが自動的に渡されます。
実行する処理の1行目にpreventDefaultメソッドを実行していますが、これはEventオブジェクトが標準で持っているメソッドで、実行するとデフォルトの動作をキャンセルすることができます。
ここではフォームの送信をキャンセルするので、このメソッドを実行するとフォーム送信は行われません。
ページ遷移もしなくなります。

その後に、「名前」を入力する1行テキストから入力値を取得してconsole.logメソッドで出力します。

今回はシンプルに入力された値を出力しているだけですが、デフォルトのフォーム送信をキャンセルしてフォームが正しく入力されているか確認したり、その他の任意の処理を実行することができるようになります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。