HTMLFormElement: submit Event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das submit-Ereignis tritt auf, wenn ein <form>-Element übermittelt wird.
Beachten Sie, dass das submit-Ereignis auf dem <form>-Element selbst ausgelöst wird und nicht auf einem <button> oder <input type="submit"> innerhalb des Formulars. Jedoch enthält das SubmitEvent, das gesendet wird, um die Aktivierung der Formularübermittlung anzuzeigen, eine submitter-Eigenschaft, die den Button beschreibt, der ausgelöst wurde, um die Übermittlungsanforderung zu starten.
Das submit-Ereignis tritt auf, wenn:
- der Benutzer auf einen Submit-Button klickt,
- der Benutzer die Enter-Taste drückt, während ein Feld bearbeitet wird (z.B. <input type="text">) in einem Formular,
- ein Skript die Methode
form.requestSubmit()aufruft
Jedoch wird das Ereignis nicht an das Formular gesendet, wenn ein Skript die Methode form.submit() direkt aufruft.
Hinweis:
Der Versuch, ein Formular zu übermitteln, das die Validierung nicht besteht, löst ein invalid-Ereignis aus. In diesem Fall verhindert die Validierung die Formularübermittlung, und es gibt somit kein submit-Ereignis.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("submit", (event) => { })
onsubmit = (event) => { }
Ereignistyp
Ein SubmitEvent. Erbt von Event.
Ereigniseigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften erbt diese Schnittstelle die Eigenschaften ihrer Elternschnittstelle, Event.
submitterSchreibgeschützt-
Ein
HTMLElement-Objekt, das den Button oder ein anderes Element identifiziert, welches ausgelöst wurde, um die Formularübermittlung zu starten.
Beispiele
Dieses Beispiel verwendet EventTarget.addEventListener(), um auf die Formularübermittlung zu reagieren, und protokolliert den aktuellen Event.timeStamp, wann immer dies geschieht. Danach wird die Standardaktion der Formularübermittlung verhindert.
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);
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # event-submit |
| HTML # handler-onsubmit |
Browser-Kompatibilität
Loading…