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.
Der submit-Event wird ausgelöst, wenn ein <form> übermittelt wird.
Beachten Sie, dass der submit-Event auf dem <form>-Element selbst ausgelöst wird und nicht auf einem <button> oder <input type="submit"> innerhalb des Formulars. Der SubmitEvent, welcher gesendet wird, um die Ausführung der Formularübermittlung anzuzeigen, enthält jedoch eine submitter-Eigenschaft, die den Button angibt, der zur Auslösung der Übermittlungsanforderung verwendet wurde.
Der submit-Event wird ausgelöst, wenn:
- der Benutzer einen submit button anklickt,
- der Benutzer Enter drückt, während er ein Feld editiert (z.B. <input type="text">) in einem Formular,
- ein Skript die Methode
form.requestSubmit()aufruft
Der Event wird jedoch 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 einen invalid-Event aus. In diesem Fall verhindert die Validierung die Übermittlung des Formulars, und es gibt daher keinen submit-Event.
Syntax
Verwenden Sie den Event-Namen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("submit", (event) => {});
onsubmit = (event) => {};
Eventtyp
Ein SubmitEvent. Erbt von Event.
Event-Eigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften erbt dieses Interface die Eigenschaften seines Eltern-Interfaces, 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 geschieht, 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 Standard # event-submit |
| HTML Standard # handler-onsubmit |
Browser-Kompatibilität
BCD tables only load in the browser