JavaScript-Formular submit() und Ereignisse

In der Welt der Webentwicklung ist es unerlässlich, zu verstehen, wie man Formularen in JavaScript verarbeitet. Formulare sind das Rückgrat der Benutzerinteraktion auf vielen Websites und bieten Nutzern eine Möglichkeit, Informationen an Webserver zurückzugeben. Dieser Artikel taucht tief in die JavaScript-Mechanismen hinter dem Absenden von Formularen ein und konzentriert sich dabei speziell auf das submit-Ereignis und die .submit()-Methode. Wir bereichern die Erklärung mit praktischen Codebeispielen, damit auch Anfänger die Konzepte verstehen und effektiv umsetzen können.

Das submit-Ereignis verstehen

Das submit-Ereignis in JavaScript wird ausgelöst, wenn ein Formular seine Daten gerade an den Server senden will. Dieses Ereignis ist wichtig für Prüfungen vor dem Absenden, etwa Formularvalidierungen und Benutzerbestätigungen, die die Datenintegrität und die Benutzererfahrung verbessern können.

Beispiel: Formularvalidierung vor dem Absenden

Dieses Skript verhindert, dass das Formular abgesendet wird, wenn die Felder nicht korrekt ausgefüllt sind, und zeigt dem Benutzer eine Fehlermeldung an.

---

<div>
  <form style="display: flex; justify-content: center; gap: 2px; align-items: center; flex-direction: column;" id="registrationForm">
    Username: <input type="text" name="username" required />
    Email: <input type="email" name="email" required />
    <button type="submit">Register</button>
  </form>
  <div id="message" style="margin-top: 10px; text-align:center;"></div> <!-- Message container for feedback -->
  <script>
    const form = document.getElementById('registrationForm');
    form.addEventListener('submit', function(event) {
      event.preventDefault(); // Prevent actual form submission to a server
      const messageDiv = document.getElementById('message');
      if (!this.checkValidity()) {
        messageDiv.textContent = 'Please fill all required fields correctly.';
        messageDiv.style.color = 'red'; // Display the message in red for errors
      } else {
        messageDiv.textContent = 'The form was successfully submitted.';
        messageDiv.style.color = 'green'; // Display the message in green for success
        form.reset(); // Reset the form fields after successful submission
      }
    });
  </script>
</div>

Try it Yourself »

JavaScript-Funktionalität:

• Ereignislistener: Dem Formular wird ein Ereignislistener hinzugefügt, der ausgelöst wird, wenn versucht wird, das Formular abzusenden.
• Validierungsprüfung: Hier wird die Funktion checkValidity() verwendet. Sie ist eine eingebaute HTML-Formularmethode, die alle Eingaben im Formular anhand ihrer Validierungsregeln prüft (in diesem Fall etwa das Attribut required). Wenn ein Feld seine Validierungsregel nicht erfüllt, gibt die Funktion false zurück.
• Absenden verhindern: Wenn checkValidity() false zurückgibt (also das Formular ungültige oder leere Pflichtfelder enthält), verhindert das Skript, dass das Formular an einen Server gesendet wird. Stattdessen wird eine Meldung angezeigt, die den Benutzer auffordert, alle erforderlichen Felder korrekt auszufüllen.
• Absenden behandeln: Wenn alle Felder gültig sind, zeigt das Formular eine Meldung an, die ein erfolgreiches Absenden bestätigt, anstatt eine leere Seite anzuzeigen oder an einen Server zu senden.

Die .submit()-Methode nutzen

Im Gegensatz zum submit-Ereignis ermöglicht die .submit()-Methode, das Absenden eines Formulars programmatisch zu starten. Diese Methode ist besonders nützlich in Szenarien, in denen Formulardaten ohne direkte Benutzerinteraktion gesendet werden müssen, etwa nach dem Bestehen einer Reihe automatisierter Tests oder Bedingungen.

Beispiel: Programmatisches Absenden eines Formulars

Um das Absenden eines Formulars zu simulieren, ohne Daten an einen Server zu senden (bezogen auf unser Beispiel), können Sie Ihr HTML so anpassen, dass das Absenden mit JavaScript behandelt wird und das tatsächliche Absenden verhindert wird. So lässt sich die Funktionalität demonstrieren, ohne die Seite zu verlassen oder einen 404-Fehler anzuzeigen. So können Sie es machen:

---

<!DOCTYPE html>
<html>
<head>
  <title>Auto Submit Form Demo</title>
</head>
<body>
  <form id="autoSubmitForm">
    <input type="hidden" name="data" value="Automatic Submission" />
  </form>
  <script>
    function submitFormAutomatically() {
      document.getElementById('autoSubmitForm').submit();
      alert("Form submitted with data: " + document.getElementById('autoSubmitForm').data.value);
    }
    document.addEventListener('DOMContentLoaded', submitFormAutomatically); // Call the function when the DOM is ready
  </script>
</body>
</html>

Try it Yourself »

In diesem Beispiel ist das Formular so gestaltet, dass beim Absenden keine Daten irgendwohin gesendet werden. Das wird erreicht, indem das Attribut action weggelassen wird, wodurch standardmäßig an die aktuelle Seite gesendet würde. Außerdem erscheint beim Versuch, das Formular abzusenden, ein Alert. Dieser Alert soll nur zeigen, was passieren würde, wenn das Formular tatsächlich abgesendet würde – also eine Art Simulation. Er enthält den Wert eines versteckten Feldes im Formular, sodass Sie einen Teil dessen sehen können, was gesendet worden wäre. Diese Einrichtung hilft Ihnen zu verstehen, wie sich das Formular verhält, ohne tatsächlich eine Verbindung zu einem Server herstellen oder Fehler verursachen zu müssen.

Wichtiger Hinweis: Das programmgesteuerte Aufrufen von form.submit() löst das submit-Ereignis nicht aus. Wenn Sie Validierungen oder andere submit-Ereignislistener ausführen müssen, müssen Sie das Ereignis manuell auslösen: form.dispatchEvent(new Event('submit')). Für moderne Browser sollten Sie stattdessen form.requestSubmit() in Betracht ziehen. Es löst automatisch die Validierung aus und sendet das submit-Ereignis, was es zu einer sichereren Alternative zu form.submit() macht.

.submit() mit Ereignislistenern kombinieren

Die Integration von Ereignislistenern mit der .submit()-Methode kann leistungsstarke Interaktionen ermöglichen. Sie können beispielsweise Bedingungen festlegen, unter denen ein Formular nur dann abgesendet wird, wenn bestimmte Kriterien erfüllt sind, was Ihre Formularlogik robuster macht.

Beispiel: Bedingtes Absenden eines Formulars

---

<form id="conditionalForm">
  Accept Terms: <input type="checkbox" id="acceptTerms">
  <button type="button" onclick="checkAndSubmit()">Submit</button>
</form>
<script>
  function checkAndSubmit() {
    var form = document.getElementById('conditionalForm');
    var termsCheckbox = document.getElementById('acceptTerms');
    if (termsCheckbox.checked) {
      form.submit();
    } else {
      alert('You must accept the terms and conditions to proceed.');
    }
  }
</script>

Try it Yourself »

Dieser Code stellt eine Schaltfläche bereit, die beim Klicken prüft, ob ein Kontrollkästchen aktiviert ist, bevor das Formular abgesendet wird. Wenn die Bedingungen nicht akzeptiert wurden, wird dem Benutzer eine Meldung angezeigt.

Fazit

Das Beherrschen des submit-Ereignisses und der .submit()-Methode in JavaScript ermöglicht es Entwicklern, das Verhalten von Formularen präzise zu steuern und sicherzustellen, dass Daten korrekt verarbeitet werden, bevor sie an einen Server gesendet werden. Diese Techniken sind unverzichtbar für die Erstellung interaktiver, reaktionsschneller Webanwendungen, die Benutzereingaben zuverlässig erfassen und verwalten. Ob Sie Benutzerdaten validieren, Prüfungen durchführen oder Absendevorgänge programmatisch steuern – JavaScript bietet die nötigen Werkzeuge, um dies effektiv zu tun.

Practice

Welche der folgenden Aussagen sind über das JavaScript-Submit-Ereignis und die submit()-Methode für Formulare wahr?

Das submit-Ereignis wird ausgelöst, wenn ein Formular abgesendet wird, und wird normalerweise für Validierungen vor dem Senden von Daten an den Server verwendet.Die submit()-Methode kann verwendet werden, um ein Formular programmatisch abzusenden, ohne das submit-Ereignis auszulösen.Die Verwendung der submit()-Methode stellt automatisch sicher, dass alle Formularvalidierungen bestanden werden.Das submit-Ereignis kann durch Aufrufen der Methode preventDefault() im Ereignishandler abgebrochen werden, um das Absenden des Formulars zu verhindern.Das submit-Ereignis wird auch ausgelöst, wenn die submit()-Methode programmatisch aufgerufen wird.