フォーム送信を制御する

JavaScriptでWebページを動かす / 全 5 枚

JavaScriptでWebページを動かす - フォーム送信を制御する

送信ボタンは何もしなくても動く

問い合わせフォームの送信ボタンは、JavaScript を 1 行も書かなくても動きます。押すとブラウザが入力内容を送り、ページを読み込み直すからです。自分で受け取って処理したいときは、この決まった動きを先に止めます。

止めた分だけ、送る処理も画面の書き換えも自分で書くことになります。

最初の 1 行で、ブラウザ側の送信を取り消しています。

const form = document.querySelector("#contact-form");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("送信を受け取りました");
});

1 / 5

← → キーでも送れます

このスライドが付いているレッスンを開く