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.

Esercizi

Base · facile

Ascolta il submit di un form, blocca il ricaricamento con preventDefault e stampa il valore del campo.

const form = document.querySelector("#form");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const dati = new FormData(form);
  console.log(dati.get("titolo"));
});

Intermedio · medio

Dopo aver letto il valore, se non è vuoto mostralo in un paragrafo e svuota il campo (form.reset()). Verifica che inviare con il tasto Invio funzioni come cliccare il bottone.

Sfida · difficile

Spiega perché ascoltare submit sul form è preferibile ad ascoltare click sul bottone (gestisce anche l’Invio da tastiera, è più accessibile). Aggiungi una validazione minima che blocca l’invio se il campo è vuoto e comunica l’errore all’utente.

Controllo finale

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