In diesem Tutorial lernst du, wie du mit JavaScript die von Benutzern eingegebenen Daten aus Formularen auslesen und weiterverarbeiten kannst. Formularelemente sind ein wesentlicher Bestandteil jeder Webseite, da sie es den Benutzern ermöglichen, Informationen einzugeben. Oft wird gedacht, dass man dafür auf komplizierte Frameworks zurückgreifen muss. In diesem Beitrag zeigen wir, wie du mit einfachem JavaScript erfolgreich Formulardaten verarbeiten kannst.
Wichtigste Erkenntnisse
- Du erfährst, wie du Formulare erstellst, wie man mit JavaScript auf die Formulardaten zugreift und wie man die Standardverhalten von Formularen mithilfe von preventDefault verhindert, sodass du die Kontrolle über die Dateneingaben deiner Benutzer gewinnst.
Schritt-für-Schritt-Anleitung
Beginne damit, ein einfaches HTML-Formular in deinem Dokument zu erstellen. Achte darauf, dass du die verschiedenen Eingabefelder und ein Submit-Button erfolgreich einfügst.
Sobald dein Formular im Browser sichtbar ist, kannst du es testen. Gib einen Namen in das Eingabefeld ein und drücke die Enter-Taste oder den Submit-Button. Wenn alles richtig funktioniert, solltest du einen Alarm mit deinem eingegebenen Namen sehen.
Um dies zu erreichen, fügen wir ein Skript-Tag in deine HTML-Datei ein. In diesem Skript definierst du eine globale Funktion mit dem Namen submitForm, die ein Event-Objekt als Parameter akzeptiert.
Im Skript kannst du den Ereignishandler onsubmit für dein Formular festlegen. Das bedeutet, dass die submitForm-Funktion aufgerufen wird, wenn das Formular abgeschickt wird. Beachte, dass das Event-Objekt immer dann zur Verfügung steht, wenn du dich in einem Ereignishandler befindest.
Einer der wichtigen Schritte ist, die Standardaktion des Formulars zu verhindern, indem du event.preventDefault() aufrufst. Das ist wichtig, da wir nicht möchten, dass das Formular die Seite neu lädt, nachdem die Daten eingereicht wurden.
Jetzt können wir mit dem Auslesen der Formulardaten beginnen. Die Formulardaten sind in event.target verfügbar. Das macht es einfach, auf die eingegebenen Informationen zuzugreifen.
Um die Formulardaten zu erhalten, erstelle ein neues Objekt mit dem Konstruktor FormData und übergib das Formular-Element als Parameter. Nach der Erstellung des Objekts kannst du auf die Eingabewerte über die get-Methode zugreifen.
Mit formData.get('firstName') beispielsweise erhältst du den Wert des Eingabefeldes, das den Namen 'firstName' hat. Diesen Wert kannst du anschließend verwenden, um eine Nachricht zu erstellen, die dem Benutzer angezeigt wird.
Falls du das Formular um ein weiteres Eingabefeld erweitern möchtest, gehe wie folgt vor: Ergänze ein zusätzliches Textfeld für den Nachnamen mit dem Namen 'lastName'. Danach kannst du ähnliche Schritte unternehmen, um dessen Wert abzurufen.
Mit beiden Werten kannst du dann eine personalisierte Nachricht generieren. Beispielsweise: „Hallo [Vorname] [Nachname]!“
Um die Nachricht nicht mehr durch einen Alert anzuzeigen, sondern direkt im HTML zu integrieren, kannst du einen neuen Abschnitt im DOM hinzufügen, der die Nachricht als Text anzeigt. Erstelle dazu ein div mit einer eindeutigen ID und setze dessen innerText auf die resultierende Nachricht.
Du kannst jetzt die verschiedenen Variationen ausprobieren, indem du die Daten in der Konsole ausgibst oder sie für weitere JavaScript-Aktionen verwendest, wie etwa einen POST-Request über fetch.
Das ist die grundlegendste Weise, wie du Formulardaten mit JavaScript auslesen und verwenden kannst. Es gibt viele weitere Möglichkeiten, dies zu verbessern, wie das Einfügen von Validierungen oder das weitere Verarbeiten der Daten auf dem Server.
Zusammenfassung
In diesem Tutorial hast du gelernt, wie du Formulardaten mit einfachen JavaScript-Funktionen auslesen kannst. Du hast die Wichtigkeit von event.preventDefault erforscht und gesehen, wie man Daten sowohl in Alerts als auch direkt in das Dokument einfügen kann. Mit dieser Basis bist du gut gerüstet, um komplexere Formulare und deren Datenhandlung zu gestalten.
Häufig gestellte Fragen
Wie greife ich auf die Formulardaten zu?Du kannst auf die Formulardaten zugreifen, indem du mit new FormData(event.target) ein neues FormData-Objekt erzeugst.
Was passiert, wenn ich event.preventDefault() nicht aufrufe?Ohne event.preventDefault() wird das Standardverhalten des Browsers ausgeführt, was dazu führen kann, dass die Seite neu lädt.
Kann ich mehrere Formulare auf einer Seite haben?Ja, du kannst mehrere Formulare auf einer Seite haben und jedes Formular kann eine eigene onsubmit-Funktion haben.
Wie kann ich die Formulardaten für einen Fetch-Request verwenden?Du kannst die Formulardaten in ein JSON-Format umwandeln und dann mit dem Fetch-API an den Server senden.
Sind JavaScript-Frameworks für Formularverarbeitung notwendig?Nein, es ist nicht notwendig, Frameworks zu verwenden. Du kannst Formularverarbeitung vollständig mit reinem JavaScript durchführen.
