L'evento submit
Gestisca l'invio dei moduli e impedisca i ricaricamenti.
L'evento submit è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Invio dei moduli
L'evento submit viene generato quando un modulo viene inviato, sia facendo clic su un pulsante di invio sia premendo Invio in un campo. È il punto giusto per gestire i dati del modulo.
Ascoltare il modulo
Colleghi l'ascoltatore direttamente all'elemento form, non al pulsante di invio, così da coprire tutti i possibili modi di inviare il modulo.
const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
console.log("submitting");
});Il ricaricamento predefinito
Per impostazione predefinita, l'invio porta a un'altra pagina o ricarica quella corrente. Nelle app gestite da JavaScript, in genere è opportuno annullare questo comportamento.
form.addEventListener("submit", (e) => {
e.preventDefault();
});Perché usare preventDefault qui
La chiamata a preventDefault mantiene la pagina corrente, consentendo di convalidare e inviare i dati autonomamente, spesso tramite fetch.
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
// send data without reloading
});Pulsanti di invio
Un button con type="submit", che è il valore predefinito all'interno di un modulo, ne avvia l'invio. Utilizzi type="button" per i pulsanti che non devono inviare il modulo.
Invio con il tasto Invio
La pressione del tasto Invio in un campo di testo a riga singola invia il modulo. Per questo è essenziale ascoltare il modulo.
requestSubmit
form.requestSubmit invia il modulo a livello programmatico continuando a generare l'evento submit e a eseguire la validazione, diversamente da form.submit, che salta entrambe le operazioni.
form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the eventLeggere i dati durante l'invio
All'interno del gestore, crei un oggetto FormData a partire dal modulo per raccogliere in modo ordinato tutti i campi denominati.
form.addEventListener("submit", (e) => {
e.preventDefault();
const fd = new FormData(form);
const obj = Object.fromEntries(fd.entries());
console.log(obj);
});Disabilitare il pulsante
Per impedire invii duplicati, disabiliti il pulsante di invio durante l'elaborazione e lo riabiliti al termine.
form.addEventListener("submit", (e) => {
e.preventDefault();
const btn = form.querySelector("[type=submit]");
btn.disabled = true;
});Reimpostare un modulo
form.reset riporta i campi ai rispettivi valori predefiniti e l'evento reset consente di reagire all'operazione.
form.addEventListener("reset", () => {
console.log("cleared");
});Elemento submitter
La proprietà submitter dell'evento submit indica quale pulsante lo ha generato, una funzione utile quando un modulo contiene più pulsanti di invio.
form.addEventListener("submit", (e) => {
console.log(e.submitter && e.submitter.value);
});Verifica rapida
Scelga la procedura consigliata.
Riepilogo
Gestisca gli invii tramite l'evento submit del modulo, chiamando preventDefault nelle app gestite da JavaScript. Ascolti il modulo, non il pulsante, per intercettare gli invii con il tasto Invio. Utilizzi FormData per leggere i campi, requestSubmit per inviare a livello programmatico eseguendo la validazione e disabiliti il pulsante per evitare invii duplicati.
Domande Frequenti
La lezione «L'evento submit» è gratuita?
Sì — il testo completo di «L'evento submit» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «L'evento submit»?
Gestisca l'invio dei moduli e impedisca i ricaricamenti. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «L'evento submit»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.