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-Event wird ausgelöst, wenn ein <form> übermittelt wird.
Beachten Sie, dass das submit-Event auf dem <form>-Element selbst ausgelöst wird und nicht auf einem <button> oder <input type="submit"> darin. Das SubmitEvent, das gesendet wird, um die Auslösung der Formularübermittlung anzuzeigen, enthält jedoch eine submitter-Eigenschaft, die den Button bezeichnet, der angeklickt wurde, um die Übermittlung auszulösen.
Das submit-Event wird ausgelöst, wenn:
- der Benutzer auf einen Submit-Button klickt,
- der Benutzer Enter drückt, während er ein Feld bearbeitet (z.B. <input type="text">) in einem Formular,
- ein Skript die Methode
form.requestSubmit()aufruft.
Das 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 ein invalid-Event aus. In diesem Fall verhindert die Validierung die Formularübermittlung, und es gibt daher kein submit-Event.
Syntax
Verwenden Sie den Event-Namen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("submit", (event) => { })
onsubmit = (event) => { }
Event-Typ
Ein SubmitEvent. Erbt von Event.
Event-Eigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften erbt dieses Interface die Eigenschaften seines Elter-Interfaces, Event.
submitterSchreibgeschützt-
Ein
HTMLElement-Objekt, das den Button oder ein anderes Element identifiziert, das aufgerufen wurde, um die Übermittlung des Formulars auszulösen.
Beispiele
Dieses Beispiel verwendet EventTarget.addEventListener(), um auf die Formularübermittlung zu hören, und protokolliert den aktuellen Event.timeStamp, wann immer dies passiert, 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 |