Tilbage til Forms med JavaScript

1. semester / Tema 4: Grundlæggende UI

Form events, submit og reset

Lyt efter submit, stop browserens standardadfærd og nulstil formularen, når du er færdig.

Se undervisningsslides

Relevante links

TL;DR

  1. Formularer sender som standard data og reloader siden ved submit.
  2. Med addEventListener("submit", ...) kan du reagere på indsendelsen.
  3. event.preventDefault() stopper standardadfærden.
  4. form.reset() nulstiller felterne bagefter.

Hvis du kun husker én ting: Når du håndterer en formular i JavaScript, så lyt på submit, stop standardadfærden og arbejd derefter videre.

Lyt efter formularens submit

Når du vil arbejde med formularen i JavaScript, starter du typisk sådan her:

const form = document.querySelector("form");

Derefter kan du lytte efter formularens submit-event:

const form = document.querySelector("form");


form.addEventListener("submit", handleSubmit);

Det betyder: “Når formularen bliver indsendt, så kør funktionen handleSubmit.”

Stop standardadfærden

En formular prøver normalt at sende data og opdatere siden. I moderne udvikling er det ofte ikke det, vi vil. Derfor bruger man preventDefault(). Så her stopper vi det, der normalt ville ske ved submit:

function handleSubmit(event) {
  event.preventDefault();
}

Så kan du selv bestemme, hvad der skal ske bagefter.

Nulstil formularen bagefter

Hvis øvelsen handler om at samle data op eller vise noget i et outputfelt, giver det ofte mening at rydde formularen til sidst:

function handleSubmit(event) {
  event.preventDefault();


  // gør noget med data


  form.reset();
}

Det gør også tydeligt, at handleSubmit() er formularens “arbejdsfunktion”: først stop, så håndtér, så nulstil.

Bonus: Fjern browserens indbyggede popup-vindue ved ugyldige felter

Hvis du har krav i HTML som required eller minlength, vil browseren som standard vise et popup-vindue, hvis brugeren prøver at indsende uden at opfylde kravene. Det kan du også stoppe med preventDefault(), så du kan vise din egen fejlbesked i stedet:

function cancelPopup(event) {
  // 1. undertryk browserens popup
  event.preventDefault();
  // 2. sæt fokus på det første ugyldige felt
  form.querySelector(":user-invalid").focus();
}


form.addEventListener("invalid", cancelPopup, true);

Øvelser

Her træner du ovenstående flows: