HTMLFormElement: submit-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das submit-Ereignis wird ausgelöst, wenn ein <form> abgesendet wird.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("submit", (event) => { })

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onsubmit = (event) => { }

Das submit-Ereignis wird auf dem <form>-Element selbst ausgelöst und nicht auf einem darin enthaltenen <button> oder <input type="submit">. Das SubmitEvent, das anzeigt, dass das Absenden des Formulars ausgelöst wurde, enthält jedoch eine submitter-Eigenschaft. Sie verweist auf den Button, mit dem das Absenden ausgelöst wurde.

Das submit-Ereignis wird ausgelöst, wenn:

ein Benutzer auf einen Submit-Button klickt,
ein Benutzer das Formular implizit absendet,
ein Skript die Methode form.requestSubmit() aufruft.

Das Ereignis wird jedoch nicht an das Formular gesendet, wenn ein Skript die Methode form.submit() direkt aufruft.

Der Versuch, ein Formular abzusenden, das die Validierung nicht besteht, löst ein invalid-Ereignis aus. In diesem Fall verhindert die Validierung das Absenden des Formulars. Daher wird kein submit-Ereignis ausgelöst.

Implizites Absenden

Die HTML-Spezifikation legt nicht formal fest, welche Benutzeraktionen ein implizites Absenden auslösen können, da dies von den Konventionen des Betriebssystems und des Geräts abhängt. Beispielsweise ist das Drücken der Eingabetaste, während ein Texteingabefeld den Fokus hat, eine übliche Aktion. Die Reaktion des Browsers auf eine solche Aktion ist jedoch standardisiert:

Wenn das Formular einen nicht deaktivierten Standard-Submit-Button hat, löst der Browser auf diesem Button ein click-Ereignis aus. Der Standard-Button ist der erste Submit-Button in der Baumreihenfolge, dessen form owner dieses Formular ist. Dadurch wird der Vorgang zum Absenden des Formulars ausgelöst (als hätte der Benutzer den Button gedrückt), sofern das Ereignis nicht abgebrochen wird.
Wenn das Formular keinen Submit-Button hat, wird es nur dann implizit abgesendet, wenn es höchstens ein <input>-Element vom Typ text, search, tel, url, email, password, date, month, week, time, datetime-local oder number enthält. <textarea>- und <select>-Elemente verhindern das implizite Absenden nicht.
Andernfalls löst die Aktion niemals ein implizites Absenden aus: Das gilt, wenn der Standard-Submit-Button des Formulars deaktiviert ist oder wenn das Formular keinen Submit-Button und mehr als ein Eingabefeld hat, das ein implizites Absenden verhindert.

Beispiele

Dieses Beispiel verwendet EventTarget.addEventListener(), um auf das Absenden des Formulars zu reagieren. Bei jedem Auftreten wird der aktuelle Wert von Event.timeStamp protokolliert. Anschließend wird die Standardaktion zum Absenden des Formulars verhindert.

HTML

html

<form id="form">
  <label>Test field: <input type="text" /></label>
  <br /><br />
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

JavaScript

const form = document.getElementById("form");
const log = document.getElementById("log");

function logSubmit(event) {
  log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;
  event.preventDefault();
}

form.addEventListener("submit", logSubmit);