フォーム送信時に処理を実行！ onsubmit イベントを使ってみよう！
約3分で読めます
目次
onsubmit イベントとは？
「onsubmit イベント」とは、ウェブ開発において重要なJavaScriptイベントの一つです。
このイベントは、HTMLフォームが送信される際に発生します。
通常、ユーザーがフォームに入力し、送信ボタンを押すか、エンターキーを押下すると、onsubmitイベントがトリガーされます。開発者はこのイベントを利用して、フォームのデータを検証したり、フォーム送信のデフォルト動作をキャンセルしたりすることができます。
例えば、JavaScriptを使用してフォームの入力値が適切かどうかをチェックし、問題がある場合にはユーザーに警告を出すことができます。
また、onsubmitイベントは、フォームデータを非同期でサーバーに送信する際にも使用されることがあります。このイベントを適切に使用することで、ユーザーエクスペリエンスの向上や、フォームを介したデータ処理の効率化を図ることができます。
onsubmit イベントの使い方
onsubmit イベントは、フォーム要素に設定します。準備するものは、「Webブラウザ」
「テキストエディタ」です。
下記の形式で記述します。
|
<form onsubmit="return false;"> ... <button type="submit">送信</button> </form> |
- onsubmit：イベントハンドラ属性
- return false：フォーム送信をキャンセル
onsubmit イベントのサンプルコード
onsubmit イベントを使って、フォーム送信前に確認メッセージを表示する例を紹介します。
下記コードは、フォーム送信前に確認メッセージを表示し、ユーザーがキャンセルを選択した場合、フォーム送信をキャンセルします。
|
<form onsubmit="return confirm('送信してもよろしいですか？');"> <input type="text" name="name" placeholder="名前"> <input type="text" name="email" placeholder="メールアドレス"> <button type="submit">送信</button> </form> |
まとめ
onsubmit イベントは、フォーム送信時の処理を記述するための便利なイベントです。この記事で紹介した例を参考に、さまざまな場面で onsubmit イベントを使ってみてください。
あなたも onsubmit イベントを使って、Webフォームをもっと便利に活用しましょう！