SubmitEvent

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.

Die SubmitEvent-Schnittstelle definiert das Objekt, das verwendet wird, um ein submit-Ereignis eines HTML-Formulars darzustellen. Dieses Ereignis wird am <form> ausgelöst, wenn die Absendeaktion des Formulars aufgerufen wird.

Event SubmitEvent

Konstruktor

SubmitEvent()

Erstellt und gibt ein neues SubmitEvent-Objekt zurück, dessen type und andere Optionen wie angegeben konfiguriert sind. Beachten Sie, dass derzeit der einzige gültige type für ein SubmitEvent submit ist.

Instanz-Eigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften erbt diese Schnittstelle die Eigenschaften ihrer Elternschnittstelle Event.

submitter Schreibgeschützt

Ein HTMLElement-Objekt, das die Schaltfläche oder ein anderes Element identifiziert, das aufgerufen wurde, um das Formular abzusenden.

Instanz-Methoden

Obwohl SubmitEvent keine eigenen Methoden anbietet, erbt es alle von seiner Elternschnittstelle Event spezifizierten.

Beispiele

In diesem Beispiel kann ein Warenkorb eine Reihe unterschiedlicher Absende-Schaltflächen haben, abhängig von Faktoren wie den Benutzereinstellungen, den Einstellungen des Shops und möglichen Mindest- oder Höchstgrenzen des Warenkorbs, die von den Zahlungsanbietern festgelegt wurden. Jede der Absendeelemente verwendet die id, um den entsprechenden Zahlungsanbieter zu identifizieren.

js
let form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  let submitter = event.submitter;
  let handler = submitter.id;

  if (handler) {
    processOrder(form, handler);
  } else {
    showAlertMessage(
      "An unknown or unaccepted payment type was selected. Please try again.",
      "OK",
    );
  }
});

Die Handler-ID wird erhalten, indem die submit-Ereignis-Eigenschaft submitter verwendet wird, um die Absende-Schaltfläche zu erhalten, von der wir dann die ID abrufen. Mit dieser Informationen können wir eine processOrder()-Funktion aufrufen, um die Bestellung zu bearbeiten und das Formular sowie die Handler-ID weiterzugeben.

Spezifikationen

Specification
HTML Standard
# the-submitevent-interface

Browser-Kompatibilität

BCD tables only load in the browser