HTMLFormElement: submit event

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> eingereicht wird.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onsubmit = (event) => { }

Das submit-Ereignis wird auf dem <form>-Element selbst ausgelöst und nicht auf einem <button> oder <input type="submit"> darin. Allerdings enthält das SubmitEvent, das gesendet wird, um anzuzeigen, dass die Sendeaktion des Formulars ausgelöst wurde, eine submitter-Eigenschaft, die der Button ist, der ausgelöst wurde, um die Sendeanforderung zu starten.

Das submit-Ereignis wird ausgelöst, wenn:

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

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

Der Versuch, ein Formular einzureichen, das die Validierung nicht besteht, löst ein invalid-Ereignis aus. In diesem Fall verhindert die Validierung die Einreichung des Formulars und somit gibt es kein submit-Ereignis.

Implizite Einreichung

Die HTML-Spezifikation definiert nicht formell, welche Benutzeraktionen eine implizite Einreichung auslösen können, da dies von den Konventionen des Betriebssystems und der Geräte abhängt. Zum Beispiel ist das Drücken der Enter-Taste bei Fokus auf einem Texteingabefeld eine übliche Geste. Die Reaktion des Browsers auf eine solche Geste ist jedoch standardisiert:

Wenn das Formular einen nicht deaktivierten Standard-Sende-Button hat, löst der Browser ein click-Ereignis zu diesem Button aus. Der Standard-Button ist der erste Sende-Button in der Baumreihenfolge, dessen Formular-Eigentümer dieses Formular ist. Dies löst dann den Formularübermittlungsprozess aus (als ob der Button vom Benutzer gedrückt worden wäre), es sei denn, das Ereignis wird abgebrochen.
Wenn das Formular keinen Sende-Button hat, wird es implizit nur dann eingereicht, 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 blockieren keine implizite Einreichung.
Andernfalls, wenn das Formular einen deaktivierten Standard-Sende-Button hat oder keinen Sende-Button und mehr als ein Eingabefeld, das eine implizite Einreichung blockiert, löst die Geste niemals eine implizite Einreichung aus.

Beispiele

Dieses Beispiel verwendet EventTarget.addEventListener(), um auf die Einreichung des Formulars zu lauschen, und protokolliert den aktuellen Event.timeStamp, wann immer dies passiert, und verhindert dann die Standardaktion des Einreichens des Formulars.

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);