## JavaScript & Formulare

Wir haben bereits viele DOM-FUnktionen kennen lernen dürfen.

Aber eines haben wir noch nicht genauer betrachtet:

Wie wir mit JavaScript und Formularen arbeiten können / müssen.

Manchmal reicht es nicht aus, das Standard-HTML-Formular direkt abzusenden.

Es kommen früher oder später Themen auf, die es erfodern per JavaScript in den Formular-Prozess einzugreifen.

Meistens sehen wir uns Daten an, weißen auf Fehlern in den Daten hin, oder versuchen auf fehlende Informationen hinzuweisen.

Zusätzlich müssen wir dafür Sorgen, dass keine Bots einfach Formulardaten absenden können.

### Auf Daten in Inputs zugreifen

Wir können zu jederzeit die Daten aus einem Input auf 2 Arten auslesen:

1. Wir fragen die Daten aus dem HTML-Element ab

2. Wir erhalten ein "update" durch den `change` oder `keydown` Event-Listener

          <input id="my-input" type="text" />

          const input = document.getElementById('my-input');

          // Direkt auf die Daten zugreifen...
          console.log(input.value);

          // Mit einem keydown Event aufs target.value schauen
          input.addEventListener('keydown', (event) => {
            console.log(event.target.value);
          })

Es gibt verschiedene Arten von Events für ein Input-Feld

- change (Browser-Abhängig wann)
- keydown (Bei Tastendruck)
- keyup (Beim Loslassen der Taste)

Je nach `type`, finden wir den gesuchten Inhalt an anderer Stelle:

- Checkbox / Radio -> .checked (boolean)
- Text-basiert -> .value (string)

Select hat seinen aktuell ausgewählten Wert auch in `.value`. Der Wert ist aber das `value`-Attribut der Option (anstelle des Angezeigten Textes)

### Wert ändern

Wir können den Wert eines jeden Inputs dahingehend ändern indem wir einfach das `.value` (beziehungsweise das `.checked`-Attribut bei Checkboxen oder Radios) überschreiben.

### Eingabedaten im Rahmen eines Formulars

Daten die Innerhalb eines html `form` Elementes eingegeben worden sind, können während des `submit` Events "abgefangen" werden.

Wenn keine Action für das Formular definiert ist, wird die Action-URL als aktuelle URL gesetzt (und somit bei einem submit auch Daten an diese URL versendet, was wiederum zu einem Reload führt)

Diese Standard-Aktion des Forms (sowie viele andere Standard-Aktionen anderer Elemente) kann abgebrochen werden, indem auf dem event-Objekt `.preventDefault()` aufgerufen wird.

Wir können zu jederzeit auf die Inhalte eines Formulars zugreifen indem wir eine spezielle Klasse nutzen: `FormData`.

Wir können dieser Klasse beim erstellen das Formular-Element mitgeben. Der Browser wird dann alle Eingabefelder in resultierenden Objekt anhand des `name` Attributs als key hinterlegen.

Achtung: Es werden nur Daten in das FormData Objekt aufgenommen, dessen `input` nicht `disabled` ist.