Controlli e valori

Nella maggior parte dei casi la gestione di un form tramite JavaScript richiede l'accesso ai suoi controlli e ai valori inseriti dall'utente.

A controlli diversi corrispondono modalità diverse di interazione con l'utente e di gestione dell'input: pensiamo ad esempio alla differenza tra l'inserimento di un valore in una casella di testo e la selezione una voce da un elenco in un menu a discesa, oppure alle scelte da fare spuntando un insieme di checkbox.

Nonostante queste differenze i controlli mantengono sostanzialmente lo stesso approccio per il recupero dei valori in input:attraverso il DOM e con l'accesso alla proprietà value.

La proprietà value di qualsiasi controllo contiene il suo valore corrente indipendentemente dallo specifico tipo di controllo. Per esempio prendiamo una casella di testo descritta in questo modo:

<input name="nome" value="Andrea">

Otteniamo il valore della casella piuttosto semplicemente:

var nome = document.forms.MyForm.nome.value;

Ci sono però dei caso particolari che val la pena esaminare.

Dropdown menu o menu "a discesa"

Iniziamo considerando un controllo piuttosto interessante: esaminiamo il seguente menu a discesa:

<select name="selProvincia">
	<option value="RM">Roma</option>
	<option value="NA">Napoli</option>
	<option value="TO">Torino</option>
	<option value="MI">Milano</option>
</select>

possiamo ottenere il valore selezionato dall'utente tramite il seguente codice:

var selectedProvincia = document.forms.MyForm.selProvincia.value;

Occorre prestare attenzione alla differenza tra valore del controllo e testo visualizzato. Ad esempio, nel caso dell'elenco delle province abbiamo visualizzato il nome esteso delle città ma abbiamo associato all'attributo value la relativa sigla. Il valore riportato dall'omonima proprietà sarà quindi la sigla della provincia.

Se vogliamo accedere al valore testuale della voce selezionata dobbiamo adottare un approccio diverso:

var selIndex = document.forms.MyForm.selProvincia.selectedIndex;
var selItem; 
if (selIndex > -1) {
	selItem = document.forms.MyForm.selProvincia.options[selIndex];
	console.log(selItem.text);
}

Come possiamo vedere dal codice, abbiamo prima di tutto recuperato l'indice dell'elemento selezionato tramite la proprietà selectedIndex. Nel caso in cui l'utente non ha effettuato alcuna selezione il valore di questa proprietà è -1. In caso contrario possiamo sfruttare il suo valore per individuare l'elemento option all'interno dell'array options del menu a discesa. Il testo della voce selezionata è rappresentato dalla proprietà text della option.

Selezioni multiple

Purtroppo l'utilizzo della proprietà value non è più sufficiente quando il menu a discesa è impostato per consentire la selezione multipla:

<select name="selProvincia" multiple="multiple">
	<option value="RM">Roma</option>
	<option value="NA">Napoli</option>
	<option value="TO">Torino</option>
	<option value="MI">Milano</option>
</select>

In questo caso la proprietà value restituisce il primo elemento selezionato. Per ottenere l'elenco degli elementi selezionati dall'utente occorre eseguire un ciclo analogo a quello mostrato di seguito:

var options = document.forms.MyForm.selProvincia.options;
var selectedOptions = [];
for (var i = 0; i < options.length; i++) {
	if (options[i].selected) selectedOptions.push(options[i].value);
}

In pratica, scorriamo l'elenco delle opzioni associate al controllo alla ricerca di quelle con la proprietà selected impostata a true. Nel nostro esempio abbiamo inserito i valori delle opzioni selezionate in un array selectedOptions.

Radio buttons

Nel caso di controlli di tipo radio button occorre fare alcune osservazioni. Innanzitutto richiamiamo il fatto che un gruppo di elementi di tipo radio button consentono la selezione di un solo elemento del gruppo. Il raggruppamento di valori è determinato dal nome associato ai radio button, quindi se ad esempio in un form vogliamo consentire la selezione del sesso dobbiamo assegnare lo stesso valore all'attributo name di entrambi i radio button:

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

In questo caso il riferimento a document.myForm.sesso restituisce un array di due elementi. Tuttavia possiamo stabilire quale dei due elementi è stato selezionato semplicemente accedendo alla proprietà value dell'array:

var sesso = document.forms.MyForm.sesso.value;

La proprietà value dei controlli restituisce il loro valore corrente rappresentandolo come stringa. Pertanto, quando dobbiamo elaborare il valore di un controllo dovremmo convertirlo nel tipo di dato previsto. Ad esempio, se in una casella di testo ci aspettiamo un valore numerico, prima di effettuare dei calcoli su di esso dovremmo prima convertirlo tramite parseInt() o parseFloat().

Possiamo tuttavia ricorrere alle proprietà valueAsNumber o valueAsDate per ottenere il valore del controllo già convertito.