Categorie
Javascript Programmazione

{JS} DOM API: Eventi dei forms

Eventi dei form

Abbiamo visto come navigare tra i forms di un pagina, tra i campi di input contenuti, recuperare valori ed impostare valori preselezionati.

I forms hanno a disposizione una serie di eventi utili per gestire le varie azioni che un utente può effettuare con essi:

inputIl valore di un elemento di input editabile es <input> o <textarea> è cambiato
changeIl valore di una casella di selezione/opzioni è cambiato
submitL’utente ha inviato il modulo
resetL’utente ha fatto click sul tasto reset del modulo
cutL’utente ha utilizzato il comando “taglia” su un elemento del modulo
copyL’utente ha utilizzato il comando “copia” su un elemento del modulo
pasteL’utente ha utilizzato il comando “incolla” su un campo del modulo
selectL’utente ha selezionato del testo in un capo del modulo

Quelli che seguono, si aggiungono ai precedenti, ma non sono eventi ad uso esclusivo dei forms:

focus / focusinL’elemento ottiene il focus
blur / focusoutL’elemento perde il focus

Affronteremo di seguito gli eventi principali.

Evento “input”

L’evento input rintraccia il cambiamento-di-valore inteso come una selezione effettuata da un utente o un valore immesso all’interno.

var primoInput = document.forms.mioForm.primoInput;
var paragrafoNotifica = document.getElementById('paragrafoNotifica');

primoInput.oninput=function(){
paragrafoNotifica.innerHTML=`Stai scrivendo: ${primoInput.value}`;
}

L’evento input si attiva ogniqualvolta si immette un valore; rimane quindi in ascolto delle immissioni.

L’Evento “reset”

I forms normalmente prevedono anche un tasto per resettare, rimuovere tutti i valori immessi in un form.
Quando l’utente clicca su un pulsante di tipo reset, i controlli della form corrente acquisiscono il loro valore iniziale. 

Bottoni predefiniti

Per quanto concerne i form sono presenti dei bottoni predefiniti che se inseriti all’interno del form stesso automatizzano l’operazione

<form name="mioForm2>
...
<button type="reset" form="mioForm2">Ricomincia</button>
<button type="submit" form="mioForm2" value="Submit">Invia</button>
..
</form>

Il metodo .reset()

Qualora avessimo delle esigente particolari possiamo inoltre utilizzare il metodo .reset() dei form; il metodo si applica al modulo-stesso e coinvolgerà tutti i campi di input

document.forms.mioForm2.reset();

reset event

Se volessimo rintracciare l’evento stesso di richiesta di reset possiamo utilizzare l’evento dedicato.

var paragrafoNotifica3 = document.getElementById('paragrafoNotifica3');

document.forms.mioForm3.addEventListener('reset', function(event){
event.preventDefault();
paragrafoNotifica3.innerHTML=`Sicuro di voler ricominciare?`;
});

L’evento “submit”

“submit” è l’evento che si occupa di inviare i dati raccolti, inseriti dall’utente, tramite un form.
In genere questi dati sono inviati al server che gli elabora e risponde fornendo al browser una pagina con il risultato.

In attesa dell’inserimento dei dati..

I dati possono essere inviati al server all’interno della stessa richiesta HTTP (metodo POST) o all’interno della queryString (metodo GET):

https://www.cinquepuntozero.it/?quantita=5&costo=20

In alcuni casi, tuttavia, è possibile effettuare le elaborazioni direttamente sul browser, lato client, sfruttando JavaScript.

Un esempio è il caso in cui l’elaborazione sia soltanto un calcolo sui valori inseriti dall’utente; questo caso lo tratteremo nel paragrafo “submit event”.

Bottoni predefiniti

Come visto in precedenza, come accadeva per il pulsante “reset”, esiste un bottone predefinito, inseribili all’interno del form stesso, che si occupa di inviare tali dati.

<form id="mioForm4">
...
<button type="submit" form="mioForm4" value="Submit">Invia</button>
</form>

Per comprendere meglio il funzionamento dell’evento “submit” dobbiamo affrontare, seppur superficialmente, la struttura avanzata di un form.

<form id="mioForm4" action="/" method="get">

<label for="quantita">Inserisci quantità/pezzi:</label>
<input type="text" value="" name="quantita">
<label for="costo">Inserisci costo per pezzo:</label>
<input type="text" value="" name="costo">

<button type="submit" form="mioForm4" value="Submit">Calcola</button>
<p id="costoTotale">In attesa dell'inserimento dei dati..</p>

</form>
Struttura avanzata di un form

I vari tags che compongono un form, per gestire correttamente un invio di dati devono contenere attributi aggiuntivi:

TagAttributi necessari
<form>id, action e method
<label>for
<input>type e name e value
<button>type, form, name e value
<form>

Il tag <form> deve contenere i seguenti attributi:

  • id: nome univoco identificativo del form;
  • action:  specifica dove inviare i dati del modulo quando viene inviato un modulo; può contenere un url assoluto o relativo;
  • method: specifica come inviare i dati del modulo; è possibile inviare i valori con metodo GET, valori passati con coppia nome-valore nella queryString, e con POST, valori passati all’interno del corpo della richiesta HTTP (non visibili nell’URL)

I valori inseriti in un form e passati mediante metodo GET saranno inviati mediante QueryString al server.
In informatica una query-string o stringa di ricerca è la parte di un URL che contiene dei dati da passare in input ad un programma.

Specifiche su GET: Aggiunge i dati del modulo all'URL in coppie nome-valore; La lunghezza di un URL è limitata (a circa 3000 caratteri); Non utilizzare GET per inviare dati sensibili; Gli invii di moduli con GET possono essere inseriti nei preferiti.
Specifiche sul POST: Aggiunge i dati del modulo all'interno del corpo della richiesta HTTP ( non visibili nell'URL); Non ha limiti di dimensioni; Gli invii di moduli con POST non possono essere inseriti nei preferiti.
<label>

L’attributo “for” presente nel tag <label> indica qual’è il suo campo input di riferimento.

<input>

Il tag <input> specifica un campo di input in cui l’utente può inserire i dati; deve contenere i seguenti attributi:

  • type: indica le i differenti tipi di visualizzazione.

Esistono differenti tipi di visualizzazione alcuni dei quali prevedono ulteriori attributi aggiuntivi:

buttoncheckboxcolordatedatetime-local
emailfilehiddenimagemonth
numberpasswordradiorangereset
searchsubmitteltexttime
urlweek

<input type=”text”> è il valore di default.

  • name: è il nome identificativo del campo di input e rappresenterà il nome del valore nella coppia nome-valore passata alla queryString;
  • value: è il valore del campo di input può essere inizializzato o lasciato vuoto in attesa di immissione.
<button>

Il tag <button> crea un bottone; a determinare cosa effettuerà è l’attributo “type”.

  • type: i valori possibili sono reset e submit; il primo per la cancellazione di tutti i dati immessi; il secondo per l’invio effettivo dei dati.
  • form: indica al bottone di quale form è necessario cancellare i dati immessi o procedere all’invio; il valore contenutio nell’attributo concilierà con l’id del from di interesse.
  • name: definisce il nome del pulsante; è inviato al server in coppia con il suo valore , name-value, ed parte dei dati del modulo, quando quel pulsante viene utilizzato per inviare il modulo.
  • value: definisce il valore associato al pulsante.

Qual’è la differenza tra button e input:

<button type="submit"></button>
<input type="submit">

Entrambi vengono visualizzati come pulsanti e fanno sì che i dati del modulo vengano inviati al server.
La differenza è che <button> può avere contenuto, mentre <input> non può; è un elemento vuoto/nullo.
Inoltre non è possibile aggiungere markup al testo o inserire un’immagine. Quindi <button> ha una gamma più ampia di opzioni di visualizzazione.

submit event

Avevamo lasciato in sospeso la possibilità di elaborare direttamente sul browser, quindi senza l’invio effettivo dei dati ad un server, i dati immessi dall’utente.
L’evento “submit” rintraccia l’azione di invio è ci permette di effettuare operazioni differenti dal comportamento predefinito da un modulo form.

In attesa dell’inserimento dei dati..

Per comportamento predefinito un modulo invia i suoi dati quindi dovremo prevenirlo con event.preventDefault();

var mioForm5 = document.forms.mioForm5;
mioForm5.addEventListener('submit', function(event){
event.preventDefault();
var quantita = Number(document.forms.mioForm5.quantita2.value);
var costo = Number(document.forms.mioForm5.costo2.value);
var risultato = costo*quantita;
var costoTotale2 = document.getElementById('costoTotale2');
costoTotale2.innerHTML=`Il costo totale dell'ordine sarà: ${risultato} euro`;
});

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *