Gestire l'invio di un form

In parole semplici

Un form prova a inviare la pagina. Durante gli esercizi vogliamo fermare questo comportamento e gestire i dati con JavaScript.

Questa lezione fa parte del modulo Rendere interattiva una pagina. L’obiettivo del modulo è: Collegare JavaScript a HTML in modo graduale: selezionare elementi, reagire a eventi, leggere form e salvare dati.

Parole nuove

• submit: evento di invio del form.
• preventDefault: istruzione che blocca il comportamento automatico.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una todo list semplice che salva le attività nel browser.

Esempio da copiare

<form id="form">
  <input name="titolo" placeholder="Nuova attività">
  <button>Aggiungi</button>
</form>

<script>
  const form = document.querySelector("#form");

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const dati = new FormData(form);
    console.log(dati.get("titolo"));
  });
</script>

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

1. Crea un form con un input.
2. Ascolta submit.
3. Blocca il comportamento automatico.
4. Leggi il valore con FormData.
5. Stampalo in console.

Controllo finale

Hai finito quando il valore appare in console e la pagina non si ricarica.