Formulare mit JavaScript

Mit JavaScript kannst du HTML-Formulare interaktiv machen: Eingaben auslesen, prüfen und das Standard-Verhalten beim Absenden steuern – ohne dass die Seite neu geladen wird.

Die HTML-Grundlagen zu Formularen hast du bereits im Kapitel Grundaufbau Formulare kennengelernt. Hier geht es um die JavaScript-Seite.

Warum Formulare mit JavaScript?

Ohne JavaScript sendet der Browser das Formular direkt ab – die Seite lädt neu. Mit JavaScript kannst du stattdessen:

• das Absenden abfangen und selbst steuern
• Eingaben auslesen und in der Konsole oder im Code weiterverarbeiten
• prüfen, ob alle Felder korrekt ausgefüllt sind
• Fehlermeldungen anzeigen, bevor das Formular abgeschickt wird

1<form id="kontaktFormular">
2    <label for="name">Name:</label>
3    <input type="text" id="name" name="name">
4
5    <label for="email">E-Mail:</label>
6    <input type="email" id="email" name="email">
7
8    <button type="submit">Absenden</button>
9</form>

Submit-Event abfangen

Wenn der Nutzer auf Absenden klickt, feuert das Formular ein submit-Event. Mit addEventListener reagierst du darauf.event.preventDefault() verhindert das normale Absenden – die Seite lädt nicht neu.

1const formular = document.getElementById("kontaktFormular");
2
3formular.addEventListener("submit", function(event) {
4    event.preventDefault();
5    console.log("Formular wurde abgesendet!");
6});

Eingabewerte auslesen

Mit document.getElementById("id").value liest du den Inhalt eines Eingabefelds aus. Die id im HTML muss dabei mit der im JavaScript übereinstimmen.

1formular.addEventListener("submit", function(event) {
2    event.preventDefault();
3
4    const name = document.getElementById("name").value;
5    const email = document.getElementById("email").value;
6
7    console.log("Name:", name);
8    console.log("E-Mail:", email);
9});

Eingaben prüfen (Validierung)

Bevor du ein Formular verarbeitest, solltest du prüfen, ob die Eingaben sinnvoll sind. Ist ein Pflichtfeld leer, zeigst du eine Meldung und brichst mit return ab.

1formular.addEventListener("submit", function(event) {
2    event.preventDefault();
3
4    const name = document.getElementById("name").value;
5
6    if (name.trim() === "") {
7        alert("Bitte gib deinen Namen ein!");
8        return;
9    }
10
11    console.log("Formular ist gültig:", name);
12});

trim() entfernt Leerzeichen am Anfang und Ende – so erkennst du auch Felder, die nur aus Leerzeichen bestehen.