Javascript

フォームを送信してみよう

フォームを送信したときのイベントの扱いについて見ていきます。

  • submit
  • preventDefault()

submit

・フォームタグのイベントについてで文字や数字を入力したらコンソールログにsubmidと表示されるようにしていきます。

・HTMLにフォームタグを付けてその中にインプット部品とボタンタグをつけていきます。フォームですが、ボタンを中に配置しておくと、このボタンをクリックしたときに submit というイベントが発生します。

・JavaScriptではまずフォーム要素を取得していきます。そのうえでイベントリスナーでsubmitされたときにメッセージを表示するようにします。コンソールでsubmitと表示します。

・ただこのままだと一瞬だけ表示されますがすぐに消えてしまいます。これは、フォーム送信するとページ遷移が発生し一瞬表示されたあとにページがリロードされるためです。

preventDefault()

・ページ遷移をキャンセルする方法についても見ていきます。Event オブジェクトを渡してあげて、既定の動作をキャンセルすることができる preventDefault() というメソッドを実行してあげます。

・ preventDefault() を使うぐらいだったら form タグを使わなくても、今までどおりボタンの click イベントを使えば良いのでは、と思うかもしれませんが、 form タグを使っておくと、ボタンをクリックしなくても Enter キーでフォームを送信できるというメリットがあります。

・イベントオブジェクトと合わせてe.preventDefault();と書いていけばいいでしょう。

・フォームを Enter キーで送信するには、 form タグの中に button タグが必要ですが、実は form タグの中に <input type="text"> 1 つだけの場合は、 button を省略しても Enter キーだけで送信できます。

-Javascript