submit イベント
フォーム送信を処理し、ページの再読み込みを防ぎます。
「submit イベント」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
フォームの送信
フォームが送信されると、送信ボタンのクリックでもフィールド内でのEnterキー入力でも、submitイベントが発生します。フォームデータを処理するのに適した場所です。
フォームでイベントを監視する
リスナーは送信ボタンではなくform要素自体に取り付けます。これにより、すべての送信経路に対応できます。
const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
console.log("submitting");
});デフォルトの再読み込み
デフォルトでは、フォームを送信するとページが移動または再読み込みされます。JavaScriptで動作するアプリでは、通常これをキャンセルします。
form.addEventListener("submit", (e) => {
e.preventDefault();
});ここでpreventDefaultを使う理由
preventDefaultを呼び出すとページをそのまま維持できるため、自分でデータを検証して送信できます。送信にはfetchを使うことがよくあります。
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
// send data without reloading
});送信ボタン
type="submit"のbutton（フォーム内でのデフォルト）は送信を開始します。送信しないボタンにはtype="button"を使います。
Enterキーによる送信
1行のテキストフィールドでEnterキーを押すとフォームが送信されます。そのため、フォーム自体でイベントを監視することが重要です。
requestSubmit
form.requestSubmitはプログラムから送信しながら、submitイベントの発生とバリデーションの実行も行います。一方、form.submitはその両方をスキップします。
form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the event送信時のデータの読み取り
ハンドラー内でフォームからFormDataを作成すると、名前付きフィールドをすべて簡潔に収集できます。
form.addEventListener("submit", (e) => {
e.preventDefault();
const fd = new FormData(form);
const obj = Object.fromEntries(fd.entries());
console.log(obj);
});ボタンを無効にする
二重送信を防ぐには、処理中は送信ボタンを無効にし、処理が終わったら再び有効にします。
form.addEventListener("submit", (e) => {
e.preventDefault();
const btn = form.querySelector("[type=submit]");
btn.disabled = true;
});フォームをリセットする
form.resetはフィールドをデフォルト値に戻して消去します。また、resetイベントを使うとリセットに応答できます。
form.addEventListener("reset", () => {
console.log("cleared");
});Submitter要素
submitイベントのsubmitterプロパティは、どのボタンが送信を開始したかを示します。フォームに複数の送信ボタンがある場合に便利です。
form.addEventListener("submit", (e) => {
console.log(e.submitter && e.submitter.value);
});クイックチェック
最適な方法を選んでください。
まとめ
送信はフォームのsubmitイベントで処理し、JavaScriptで動作するアプリではpreventDefaultを呼び出します。Enterキーによる送信も捕捉できるよう、ボタンではなくフォームでイベントを監視します。フィールドの読み取りにはFormData、バリデーション付きのプログラム送信にはrequestSubmitを使い、二重送信を防ぐためにボタンを無効にします。
よくある質問
「submit イベント」レッスンは無料ですか？
はい。「submit イベント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「submit イベント」で何を学びますか？
フォーム送信を処理し、ページの再読み込みを防ぎます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「submit イベント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。