JavaScript Academy · Lektion

Das submit-Ereignis

Behandeln Sie das Absenden von Formularen und verhindern Sie Neuladevorgänge.

Das submit-Ereignis ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Formulare absenden

Das submit-Ereignis wird ausgelöst, wenn ein Formular gesendet wird – entweder durch Klicken auf eine Senden-Schaltfläche oder durch Drücken der Eingabetaste in einem Feld. An dieser Stelle sollten Sie die Formulardaten verarbeiten.

Listener am Formular

Fügen Sie den Listener am form-Element selbst hinzu, nicht an der Senden-Schaltfläche, damit alle Wege zum Absenden erfasst werden.

const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
  console.log("submitting");
});

Das standardmäßige Neuladen

Standardmäßig navigiert der Browser beim Absenden zu einer anderen Seite oder lädt die Seite neu. Bei JavaScript-gesteuerten Anwendungen brechen Sie dieses Verhalten normalerweise ab.

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

Warum Sie hier preventDefault aufrufen

Durch den Aufruf von preventDefault bleibt die Seite geöffnet, sodass Sie die Daten selbst validieren und senden können, häufig über fetch.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  // send data without reloading
});

Senden-Schaltflächen

Ein button mit type="submit" (der Standardwert innerhalb eines Formulars) löst das Absenden aus. Verwenden Sie type="button" für Schaltflächen, die das Formular nicht absenden sollen.

Die Eingabetaste sendet das Formular

Durch Drücken der Eingabetaste in einem einzeiligen Textfeld wird das Formular abgesendet. Deshalb ist es wichtig, auf dem Formular zu lauschen.

requestSubmit

form.requestSubmit sendet das Formular programmgesteuert, löst dabei aber weiterhin das submit-Ereignis aus und führt die Validierung durch. form.submit überspringt beides.

form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the event

Daten beim Absenden auslesen

Erstellen Sie innerhalb des Handlers ein FormData-Objekt aus dem Formular, um alle benannten Felder übersichtlich zu erfassen.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const obj = Object.fromEntries(fd.entries());
  console.log(obj);
});

Die Schaltfläche deaktivieren

Deaktivieren Sie die Senden-Schaltfläche während der Verarbeitung, um ein doppeltes Absenden zu verhindern, und aktivieren Sie sie anschließend wieder.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const btn = form.querySelector("[type=submit]");
  btn.disabled = true;
});

Ein Formular zurücksetzen

form.reset setzt die Felder auf ihre Standardwerte zurück, und das reset-Ereignis ermöglicht Ihnen, darauf zu reagieren.

form.addEventListener("reset", () => {
  console.log("cleared");
});

Submitter-Element

Die Eigenschaft submitter des submit-Ereignisses gibt an, welche Schaltfläche das Ereignis ausgelöst hat. Das ist nützlich, wenn ein Formular mehrere Senden-Schaltflächen besitzt.

form.addEventListener("submit", (e) => {
  console.log(e.submitter && e.submitter.value);
});

Kurztest

Wählen Sie die beste Vorgehensweise aus.

Zusammenfassung

Verarbeiten Sie das Absenden über das submit-Ereignis des Formulars und rufen Sie für JavaScript-gesteuerte Anwendungen preventDefault auf. Lauschen Sie am Formular (nicht an der Schaltfläche), damit auch das Absenden über die Eingabetaste erfasst wird. Verwenden Sie FormData zum Auslesen der Felder, requestSubmit zum programmgesteuerten Absenden mit Validierung und deaktivieren Sie die Schaltfläche, um doppelte Übermittlungen zu vermeiden.

Häufig gestellte Fragen

Ist die Lektion „Das submit-Ereignis“ kostenlos?

Ja — der vollständige Text von „Das submit-Ereignis“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das submit-Ereignis“?

Behandeln Sie das Absenden von Formularen und verhindern Sie Neuladevorgänge. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Das submit-Ereignis“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy