Ein Formular abschicken

Wenn eine Seite mehrere Dinge auf einmal abfragt, kommen ihre Felder in ein Formular: das Element form. Ein Formular hat einen Button, der es abschickt, einen button mit type="submit":

<form id="newsletter">
    <label for="email">E-Mail</label>
    <input id="email">
    <button type="submit">Anmelden</button>
</form>
<p id="danke"></p>

Der Nutzer schickt das Formular ab, indem er auf den Button klickt oder in einem seiner Felder Enter drückt. So oder so bekommt das Formular das Ereignis submit, und dorthin gehört der Handler: an das Formular, nicht an den Button.

Wenn ein Formular abgeschickt wird, tut der Browser auch von selbst etwas: Er schickt das Getippte an einen Server und lädt die Seite neu. Das ist seine Standardaktion, und bei einer Seite, deren Skript sich um das Formular kümmert, stört sie: Die Seite beginnt von vorn, alles Getippte ist weg, und auch alles, was dein Handler angezeigt hat. Probiere es in der Vorschau dieser Übung aus: Tippe etwas in die Felder und klicke auf den Button. Die Seite lädt neu, und die Felder sind leer. Die Methode event.preventDefault() sagt dem Browser, dass er seine Standardaktion nicht ausführen soll:

const formular = document.querySelector("#newsletter");
const emailInput = document.querySelector("#email");
const danke = document.querySelector("#danke");

formular.addEventListener("submit", function (event) {
    event.preventDefault();
    danke.textContent = `Danke! Wir schreiben an ${emailInput.value}.`;
});

Rufe sie zuerst auf, am Anfang des Handlers: Wenn etwas darunter mit einem Fehler endet, wird die Seite trotzdem nicht neu geladen.

Typische Fehler:

• event.preventDefault; ohne Klammern ruft die Methode nicht auf, tut also nichts, und die Seite lädt neu.
• Ein button in einem Formular schickt das Formular auch ohne type="submit" ab. Wenn ein Formular einen weiteren Button hat, einen, der es nicht abschicken soll, gib diesem Button type="button".