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 July 2015.
Das submit Ereignis wird ausgelöst, wenn ein <form> übermittelt wird.
Beachten Sie, dass das submit Ereignis auf dem <form>-Element selbst ausgelöst wird und nicht auf einem der enthaltenen <button> oder <input type="submit">. Allerdings enthält das SubmitEvent, das gesendet wird, um die auszulösende Übermittlungsaktion des Formulars anzuzeigen, eine submitter-Eigenschaft, welche angibt, welcher Button zur Auslösung der Übermittlungsanforderung verwendet wurde.
Das submit Ereignis wird ausgelöst, wenn:
- der Benutzer einen Submit-Button anklickt,
- der Benutzer Enter drückt, während er ein Feld (z. B. <input type="text">) in einem Formular bearbeitet,
- ein Skript die Methode
form.requestSubmit()aufruft
Das Ereignis wird jedoch nicht an das Formular gesendet, wenn ein Skript direkt die Methode form.submit() 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 Übermittlung des Formulars, und daher gibt es kein submit Ereignis.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("submit", (event) => {});
onsubmit = (event) => {};
Eventtyp
Ein SubmitEvent. Erbt von Event.
Ereigniseigenschaften
Neben den unten aufgeführten Eigenschaften erbt dieses Interface die Eigenschaften seiner Elternschnittstelle, Event.
submitterSchreibgeschützt-
Ein
HTMLElement-Objekt, das den Button oder ein anderes Element identifiziert, das zur Auslösung der Formularübermittlung verwendet wurde.
Beispiele
Dieses Beispiel verwendet EventTarget.addEventListener(), um auf die Übermittlung des Formulars zu hören, und protokolliert den aktuellen Event.timeStamp, wann immer dies auftritt, und verhindert dann die Standardaktion der Formularübermittlung.
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 # event-submit |
| HTML # handler-onsubmit |