jQuery / Method / .submit() — Formularereignisse beim Absenden

Behandeln Sie Formularübermittlung mit $(form).on("submit", handler). Für eine Anfrage mit Browserprüfung verwenden Sie form.requestSubmit(). Altes jQuery-.submit(), Ereignisauslösung und natives form.submit() haben unterschiedliche Prüfungs- und Ereigniswege.

Binden und Anfordern unterscheiden

Die jQuery-.submit()-Kurzform ist seit 3.3 veraltet. Mit Funktion bindet sie, ohne Argument löst sie aus. Beide sind in den getesteten Vollversionen 3.7.1 und 4.0.0 vorhanden. Neue Implementierungen verwenden deutlichere APIs; veraltet bedeutet nicht automatisch entfernt.

Das submit-Ereignis gehört zum Formular. Dortige Behandlung erfasst Klick, Enter und Programmaufruf. Eine Prüfung nur im Button-Klick kann andere Wege verpassen.

Vollständiger Vergleich

Speichern und öffnen Sie UTF-8 als submit-demo.html. Internet lädt vollständiges jQuery 4.0.0, Server und Build sind unnötig. preventDefault verhindert jede Übermittlung und zeigt nur Ergebnisse. Es gibt keine externe Sendung oder Speicherung. Windows Edge mit 4.0.0 und 3.7.1 prüfte Wege und Submitter-Daten.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Inspect form submit events</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 720px; margin: 20px; }
    label { display: block; margin-top: 12px; }
    input, select, button { font: inherit; max-width: 100%; margin: 5px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <form id="chooser">
    <label for="person">Name</label>
    <input id="person" name="person" required>
    <label for="fruit">Fruit</label>
    <select id="fruit" name="fruit" required>
      <option value="">Choose a fruit</option>
      <option value="apple">Apple</option><option value="banana">Banana</option>
    </select>
    <button id="inside" type="submit" name="intent" value="inside">Inspect inside</button>
  </form>
  <button id="outside" type="submit" form="chooser" name="intent" value="outside">Inspect outside</button>
  <button id="request" type="button">requestSubmit(inside)</button>
  <button id="trigger" type="button">jQuery trigger submit</button>
  <button id="restore" type="button">Reset</button>
  <label><input id="automatic" type="checkbox">Request submission when fruit changes</label>
  <pre id="result" aria-live="polite">events=0
No submission inspected.</pre>
  <script>
    jQuery(function ($) {
      const form = document.querySelector("#chooser");
      let events = 0;
      $(form).on("submit", function (event) {
        event.preventDefault(); events++;
        if (!form.reportValidity()) {
          $("#result").text("events=" + events + "\nInvalid data; not inspected."); return;
        }
        const submitter = event.originalEvent ? event.originalEvent.submitter : null;
        const data = submitter ? new FormData(form, submitter) : new FormData(form);
        $("#result").text("events=" + events + "\nsubmitter=" + (submitter ? submitter.id : "(none)") +
          "\nvalues=" + JSON.stringify(Object.fromEntries(data)));
      });
      $("#request").on("click", function () { form.requestSubmit(document.querySelector("#inside")); });
      $("#trigger").on("click", function () { $(form).trigger("submit"); });
      $("#fruit").on("change", function () {
        if (document.querySelector("#automatic").checked) form.requestSubmit();
      });
      $("#restore").on("click", function () {
        form.reset(); document.querySelector("#automatic").checked = false; events = 0;
        $("#result").text("events=0\nNo submission inspected.");
      });
    });
  </script>
</body>
</html>

Anfangsausgabe: events zählt Handleraufrufe, keine erfolgreichen Servervorgänge.

events=0
No submission inspected.

1. Leer blockieren required-Prüfungen inside, outside und requestSubmit(inside) vor dem Handler: events=0.
2. jQuery trigger submit erreicht events=1, reportValidity meldet aber Invalid data; not inspected.
3. Reset, JB und Apple eingeben, dann Inspect inside: events=1, submitter=inside und Werte erscheinen.
4. Inspect outside meldet submitter=outside und intent=outside. form="chooser" ordnet den externen Button zu.
5. requestSubmit(inside) benennt diesen Button. Enter im Namensfeld nutzt hier ebenfalls den ersten Button inside.
6. Ein gültiger jQuery-Trigger hat submitter=(none) und keinen Button-intent.
7. Automatische Anfrage einschalten und Banana wählen: requestSubmit() ohne Button hat submitter=(none).
8. Reset setzt Werte, Automatik und Zähler zurück.

event.originalEvent.submitter liest den nativen SubmitEvent-Button. Synthetische jQuery-Ereignisse können ohne originalEvent sein. FormData(form, submitter) übernimmt auch dessen name/value. Object.fromEntries behält bei doppelten Namen nur den letzten Wert; dies ist keine Vorlage zur Mehrfachwertsammlung.

Externe Bedienung und Verhindern

Ein echtes button type="submit" mit form-Attribut liefert auch außerhalb native Tastatur- und Formularbedienung. Die externe Position selbst umgeht required nicht; entscheidend ist die API.

requestSubmit() prüft Bedingungen und erzeugt bei Gültigkeit submit. Ein angegebenes Element muss ein zugeordnetes Submit-Element sein. Die Übung zeigt beide Varianten.

Sofortige Übermittlung bei select-change kann Tastaturnutzer während der Auswahl überraschen. Hier muss man sie einschalten, Navigation bleibt verhindert. Entscheiden Sie zwischen sofortigem Filter und Bestätigung. Ein .val()-Setter erzeugt allein kein change.

preventDefault stoppt die Standardübermittlung. Bei asynchronem Warten zuerst synchron verhindern; nach await kann man einen bereits laufenden Vorgang nicht zurücknehmen. Diese Übung sendet nicht asynchron. Echte Verarbeitung braucht Status, Schutz vor Doppelanfragen, Wiederherstellung und Serverprüfung.

Alte Kurzform und native Methode

Führen Sie nach Initialisierung diese kleine Prüfung aus. Das nicht eingefügte Formular verhindert Standardverhalten, ohne Serveranfrage.

const $probe = $("<form>");
let calls = 0;
$probe.submit(function (event) {
  event.preventDefault();
  calls++;
});
$probe.submit();
console.log("legacy calls=" + calls);

Console-Ergebnis; unterscheiden Sie in altem Code Funktion und argumentlosen Aufruf.

legacy calls=1

.trigger("submit") führt Handler aus und kann ohne Verhinderung zur nativen Methode weitergehen. Es simuliert nicht vollständig Button und Bedingungen. Die Übung prüft reportValidity auch synthetisch.

HTMLFormElement.submit() umgeht Bedingungen und Handler. Ein separater Test sandte ein leeres Pflichtfeld an ein iframe und fing die Anfrage lokal ab: leere Daten, null submit-Ereignisse. Ein echter Empfangsserver und Speicherung wurden nicht getestet.

Bei form.submit is not a function prüfen Sie namensgleiche name/id-Steuerelemente, die die Methode verdecken. Auch reset-Kollisionen vermeiden. Unterscheiden Sie jQuery-Sammlung und DOM-Formular: requestSubmit gehört zum DOM, gegebenenfalls über [0] erreichbar.

Echte Übermittlung braucht geeignetes action, method und Empfangsverarbeitung; passen Sie die ständige Verhinderung und Anzeige an. Valid bedeutet nicht gespeichert, und Browser-required ersetzt keine Serverprüfung.