sugulogの日記

JavaScript、submit!submitイベントでフォーム送信時に送信確認を入れよう!!

スポンサードリンク

f:id:sugulog:20210722151011p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのsubmitイベントということで

  •  フォーム送信時に送信確認を入れよう

について簡単に解説します!!

その為このブログを読むことで、submitイベントについて理解が深まるのはもちろん、送信確認を実装できるようになります。

是非最後までご愛読ください。

 

今回は、

・フォーム送信時に送信確認を入れよう

の順で解説していきます。

では早速、みていきましょう!!

・フォーム送信時に送信確認を入れよう

まずはHTMLでフォームを作成します。

f:id:sugulog:20210722153047p:plain

次にJavaScriptです。

f:id:sugulog:20210722153029p:plain

ポイントとしてはaddEventListenerでイベントを監視する際に関数の引数で、イベント発生時に生成されるオブジェクトであるeventを受け取ることです。

そしてsubmitで送信をイベントとして監視しています。

関数の中ではconfirmを使用し送信確認を行なっています。

また送信がキャンセルされた場合(false)は、eventに対しpreventDefaultをを使うことでイベントの挙動をキャンセルしています。

つまり今回であれば送信という挙動ですね。

では実際にブラウザで動きを見てみましょう。

f:id:sugulog:20210722154231g:plain

キャンセルを押した時は送信されないためテキストが残ったままで、OKを押した時は送信されるためテキストが消えているのが確認できますね!!

 

以上、今回のブログでした。

submitイベントについて理解が深まり、送信確認を実装できるようになりましたか??

誤送信を防ぐ実装としても役立ちますので、知識として持っておきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!