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:

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.

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

onsubmit = (event) => {};

Ereignistyp

Ereigniseigenschaften

Neben den unten aufgeführten Eigenschaften erbt dieses Interface die Eigenschaften seines übergeordneten Interfaces, Event.

submitter Nur lesbar

Ein HTMLElement Objekt, 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

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 Standard
# event-submit
HTML Standard
# handler-onsubmit

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch