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

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

フォームを送信するときはイベント「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」が発生したタイミングで処理を実行します。

JS コード例

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

  // HTML要素を取得
  let form_recipe = document.getElementById("form_recipe");
  
  form_recipe.addEventListener("submit", function(e){
    e.preventDefault();
  
    let 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メソッドで出力します。

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

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

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