HTMLFormElement: submit Ereignis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das submit Ereignis wird ausgelöst, wenn ein <form> abgeschickt wird.
Beachten Sie, dass das submit Ereignis auf dem <form>-Element selbst ausgelöst wird und nicht auf irgendeinem <button> oder <input type="submit"> innerhalb des Formulars. Jedoch enthält das SubmitEvent, welches gesendet wird, um anzuzeigen, dass die Submit-Aktion des Formulars ausgelöst wurde, eine submitter Eigenschaft, die die Schaltfläche kennzeichnet, die zum Absenden des Antrags aufgerufen wurde.
Das submit Ereignis wird ausgelöst, wenn:
- der Benutzer eine Submit-Schaltfläche anklickt,
- der Benutzer Enter drückt, während er ein Feld (z. B. <input type="text">) in einem Formular bearbeitet,
- ein Skript die
form.requestSubmit()Methode aufruft
Das Ereignis wird jedoch nicht an das Formular gesendet, wenn ein Skript die form.submit() Methode direkt aufruft.
Hinweis: Der Versuch, ein Formular abzusenden, welches die Validierung nicht besteht, löst ein invalid Ereignis aus. In diesem Fall verhindert die Validierung das Absenden des Formulars, sodass kein submit Ereignis auftritt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandlereigenschaft.
addEventListener("submit", (event) => {});
onsubmit = (event) => {};
Ereignistyp
Ein SubmitEvent. Erbt von Event.
Ereigniseigenschaften
Neben den unten aufgeführten Eigenschaften erbt dieses Interface die Eigenschaften seines übergeordneten Interfaces, Event.
submitterNur lesbar-
Ein
HTMLElementObjekt, das die Schaltfläche oder ein anderes Element identifiziert, das aufgerufen wurde, um das Absenden des Formulars auszulösen.
Beispiele
Dieses Beispiel verwendet EventTarget.addEventListener(), um auf das Abgeben des Formulars zu hören, und protokolliert den aktuellen Event.timeStamp, wann immer dies geschieht. Anschließend wird die Standardaktion des Abschickens des Formulars 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
function logSubmit(event) {
log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;
event.preventDefault();
}
const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("submit", logSubmit);
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML Standard # event-submit |
| HTML Standard # handler-onsubmit |
Browser-Kompatibilität
BCD tables only load in the browser