In questo tutorial imparerai come leggere e elaborare i dati inseriti dagli utenti nei moduli utilizzando JavaScript. Gli elementi dei moduli sono una parte essenziale di ogni pagina web poiché consentono agli utenti di inserire informazioni. Spesso si pensa di dover ricorrere a complicati framework per farlo. In questo articolo ti mostreremo come elaborare con successo i dati del modulo utilizzando JavaScript semplice.
Cose principali da sapere
- Imparerai come creare moduli, come accedere ai dati del modulo con JavaScript e come prevenire i comportamenti predefiniti dei moduli utilizzando preventDefault, così da avere il controllo sull'input dei dati degli utenti.
Istruzioni passo dopo passo
Inizia creando un semplice modulo HTML nel tuo documento. Assicurati di inserire correttamente i diversi campi di input e un pulsante di invio.
Una volta che il tuo modulo è visibile nel browser, puoi testarlo. Inserisci un nome nel campo di input e premi il tasto Invio o il pulsante di invio. Se tutto funziona correttamente, dovresti vedere un avviso con il nome che hai inserito.
Per ottenere questo risultato, inseriremo un tag script nel tuo file HTML. In questo script definirai una funzione globale chiamata submitForm che accetta un oggetto evento come parametro.
Nello script potrai impostare l'handler dell'evento onsubmit per il tuo modulo. Ciò significa che la funzione submitForm verrà chiamata quando il modulo viene inviato. Nota che l'oggetto evento è sempre disponibile quando ti trovi in un handler di eventi.
Uno dei passaggi importanti è prevenire l'azione predefinita del modulo chiamando event.preventDefault(). Questo è importante perché non vogliamo che il modulo ricarichi la pagina una volta inviati i dati.
Ora possiamo iniziare a leggere i dati del modulo. I dati del modulo sono disponibili in event.target. Ciò rende semplice accedere alle informazioni inserite.
Per ottenere i dati del modulo, crea un nuovo oggetto con il costruttore FormData e passa l'elemento del modulo come parametro. Dopo la creazione dell'oggetto, puoi accedere ai valori di input tramite il metodo get.
Con formData.get('firstName'), ad esempio, ottieni il valore del campo di input che ha il nome 'firstName'. Questo valore può essere utilizzato successivamente per creare un messaggio da mostrare all'utente.
Se desideri aggiungere un altro campo di input al modulo, procedi come segue: aggiungi un altro campo di testo per il cognome con il nome 'lastName'. In seguito, puoi intraprendere passaggi simili per recuperarne il valore.
Con entrambi i valori, è possibile generare un messaggio personalizzato. Ad esempio: "Ciao [Nome] [Cognome]!"
Per non visualizzare più il messaggio tramite un avviso, ma integrandolo direttamente nell'HTML, puoi aggiungere una nuova sezione al DOM che visualizza il messaggio come testo. Per farlo, crea un div con un ID univoco e imposta il suo innerText sul messaggio risultante.
Ora puoi provare le varie varianti stampando i dati nella console o utilizzandoli per ulteriori azioni JavaScript, come ad esempio una richiesta POST tramite fetch.
Questo è il modo più basilare per leggere e utilizzare i dati del modulo con JavaScript. Ci sono molte altre possibilità per migliorare questo processo, come l'aggiunta di validazioni o l'ulteriore elaborazione dei dati sul server.
Riepilogo
In questo tutorial hai imparato come leggere i dati del modulo con semplici funzioni JavaScript. Hai esplorato l'importanza di event.preventDefault e hai visto come inserire i dati sia negli alert che direttamente nel documento. Con questa base sei pronto a gestire moduli più complessi e la loro gestione dei dati.
Domande frequenti
Come posso accedere ai dati del modulo?Puoi accedere ai dati del modulo creando un nuovo oggetto FormData con new FormData(event.target).
Cosa succede se non chiamo event.preventDefault()?Senza event.preventDefault() verrà eseguito il comportamento predefinito del browser, il che potrebbe causare il ricaricamento della pagina.
Posso avere più moduli in una pagina?Sì, è possibile avere più moduli in una pagina e ciascun modulo può avere una propria funzione onsubmit.
Come posso utilizzare i dati del modulo per una richiesta di Fetch?Puoi convertire i dati del modulo in un formato JSON e quindi inviarli al server utilizzando l'API Fetch.
Sono necessari framework JavaScript per la gestione dei moduli?No, non è necessario utilizzare framework. Puoi gestire completamente la gestione dei moduli con JavaScript puro.
