Formularz bez przeładowania

Zdarzenie submit uruchamia się przy wysłaniu formularza.

Wyjaśnienie krok po kroku

event.preventDefault() powstrzymuje domyślną nawigację i pozwala samodzielnie odczytać dane.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Konsola przeglądarki lub Node.js

// HTML: <form id="f"><input name="nick"><button>OK</button></form>
document.querySelector("#f").addEventListener("submit", e => {
  e.preventDefault();
  console.log(new FormData(e.currentTarget).get("nick"));
});

Po wysłaniu: konsola pokazuje wpisany nick.

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.