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 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.

js
addEventListener("submit", (event) => {});

onsubmit = (event) => {};

Eventtyp

Event-Eigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften erbt dieses Interface die Eigenschaften seines Eltern-Interfaces, Event.

submitter Schreibgeschü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

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

js
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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
submit event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch