Inizializzare un form, default e reset

Possiamo individuare alcune fasi nel processo di acquisizione dei dati tramite un form in corrispondenza delle quali è possibile intervenire con JavaScript con lo scopo di rendere semplice ed efficace l'inserimento dei dati da parte dell'utente. Le fasi fondamentali sono:

• Inizializzazione, è la fase di preparazione del form, prima di essere visualizzato dall'utente;
• Validazione, è la fase di verifica di validità e consistenza dei dati inseriti dall'utente prima dell'invio al server o comunque prima di una elaborazione;
• Invio, in questa fase i dati raccolti e validati vengono inviati al server;
• Annullamento, questa è la fase in cui eventualmente l'utente decide di annullare i dati inseriti nella form evitando quindi di inviarli al server o sottoporli a elaborazione;
• Elaborazione, in questa fase i dati inseriti dall'utente vengono elaborati sul client per fornire una risposta all'utente oppure vengono preparati in qualche modo prima di inviarli al server.

Per ciascuna di queste fasi vedremo come JavaScript può sfruttare le API previste dal DOM per gestire al meglio i dati inseriti dall'utente offrendogli la migliore user experience.

Inizializzare un form in JavaScript

La fase di inizializzazione di un form consiste nell'impostare i valori iniziali dei suoi controlli. L'inizializzazione dei valori è in realtà un processo che il browser esegue automaticamente in base al markup degli elementi del form. Quindi, se ad esempio il form contiene il seguente markup:

<input type="text" name="txtNome" value="Mario"/>

appare a video una casella di testo già inizializzata con il valore Mario. Anche la proprietà value del corrispondente elemento del DOM sarà inizializzata allo stesso valore.

Potremmo però voler inizializzare i controlli di un form dinamicamente in base a determinate condizioni. Ad esempio, potremmo voler inizializzare una casella di testo con il nome dell'utente fornitoci dal server o comunque presente in una variabile JavaScript. In questo caso dobbiamo impostare la proprietà value del controllo al valore iniziale non appena è stato caricato il DOM:

var userName = "Giuseppe";
window.addEventListener("load", function() {
		var txtNome = document.forms.myForm.txtNome; txtNome.value = userName;
});

Analogamente, potremmo voler visualizzare o meno alcuni controlli in base a condizioni che dipendono dalla logica applicativa. Ad esempio, in un form che richiede l'inserimento di dati personali potremmo visualizzare un controllo per specificare la nazionalità solo se l'utente ha dichiarato di non essere cittadino italiano:

if (!utente.cittadinanzaItaliana) { 
	document.forms.myForm.txtNazionalita.style.visibility = "visible";
} else { 
	document.forms.myForm.txtNazionalita.style.visibility = "hidden";
}

Potremmo inoltre voler impostare dinamicamente elementi preselezionati come ad esempio in un menu a discesa o in un gruppo di radio button. Nel primo caso possiamo precedere impostando opportunamente la proprietà selectedIndex con il valore dell'indice dell'elemento desiderato:

document.forms.myForm.selProvincia.selectedIndex = 2;

Nel caso di impostazione di un elemento in un gruppo di radio button occorre preventivamente associare a ciascun elemento un identificatore:

<label><input type="radio" id="radioMaschio" name="sesso" value="M"/>Maschio</label>
<label><input type="radio" id="radioFemmina" name="sesso" value="F"/>Femmina</label>

A questo punto, per impostare ad esempio la scelta predefinita sulla voce maschio scriviamo il seguente codice:

document.getElementById("radioMaschio").checked = true;

Questo esempio dovrebbe rendere evidente la differenza tra gli attributi id e name di cui abbiamo già discusso.

Valore iniziale e valore corrente, gestire il reset

Particolare attenzione va posta sulla differenza tra il valore iniziale di un controllo ed il suo valore corrente. Intuitivamente il valore iniziale di un controllo è quello predefinito in fase di creazione o eventualmente quello specificato tramite l'attributo value. Il valore corrente è il valore che un certo controllo ha in un determinato momento: esso può coincidere con il valore iniziale o con il valore inserito o modificato dall'utente o da uno script.

Quando il contenuto del form viene annullato tramite un pulsante di tipo reset, il valore corrente di ciascun controllo del form viene riportato al suo valore iniziale.

Se intendiamo gestire la fase di inizializzazione del form tramite JavaScript dobbiamo tener presente che i valori impostati dinamicamente dal nostro codice non rappresentano valori iniziali, ma valori correnti. Quindi, in presenza di un reset del form perderemmo le nostre inizializzazioni dal momento che tutti i controlli verrebbero portati ai valori iniziali e non a quelli dinamicamente impostati dal nostro script di inizializzazione.