Argomenti trattati: la gestione dei campi di un form per selezionare una o più opzioni.
Alquanto importanti, nei form, sono i campi che consentono di effettuare una scelta, che può essere multipla, alternativa, o legata alla selezione di uno o più campi.
Per utilizzare i metodi ad essi associati, usare la seguente sintassi:
document.nomeForm.nomeCampo.metodo();
es. document.form1.Radio1.focus();
Per utilizzare le proprietà ad essi associate, usare la seguente sintassi:
document.nomeForm.nomeCampo.proprietà;
es. document.form1.Radio1.value;
Prendiamo ad esempio i campi di tipo radio, che vengono solitamente utilizzati per far effettuare una scelta alternativa.
Pertanto, il nome di entrambi i campi sarà lo stesso, in questo caso sex, e varierà il valore, ad esempio:
<input type="radio" value="Femmina" name="sex" checked>
<input type="radio" value="Maschio" name="sex">
| Metodi | |
|---|---|
| blur() | rimuove lo stato attivo dall'opzione |
| click() | richiama l'evento click sull'opzione |
| focus() | attiva il fuoco sull'opzione |
| Proprietà | |
| checked | restituisce true se l'opzione è stata selezionata, viceversa restituisce false |
| defaultchecked | è un riferimento all'attributo checked che esprime l'opzione selezionata di default al caricamento della pagina |
| form | restituisce il nome del form che contiene l'opzione |
| name | restituisce il nome dell'opzione |
| type | restituisce l'attributo type (radio) |
| value | restituisce l'attributo value |
Eventi principali supportati da MSIE per il controllo RADIO:
Nota: perché alcuni eventi abbiano effetto, è necessario che il controllo abbia il focus.
Le varie opzioni dei radio che hanno lo stesso nome, possono essere considerati come un Array.
In tal senso, per recuperare il valore selezionato, può essere utilizzato il seguente codice:
|
function recuperaValore() { for(i=0; i<document.formRadio.Sex.length; ++i) // viene innescato un ciclo, per il numero degli elementi di opzione if(document.formRadio.Sex[i].checked) { /* se l'alternativa è stata spuntata, ovvero se risulta true la condizione document.formRadio.Sex[i].checked, verrà visualizzato il valore scelto, e il ciclo si fermerà */ alert(document.formRadio.Sex[i].value); break; } } |
L'Array ha dunque una lunghezza n pari al numero di alternative, che va da 0 a (numero_di_alternative - n).
In tal senso, è possibile definire una proprietà length relativa a questo Array.
Alquanto interessante è la gestione dell'oggetto Select. Normalmente, l'aspetto è simile al seguente:
Analizzando il codice HTML:
| <select size="1" name="Mesi"> <option value="1" selected>01</option> <option value="2">02</option> <option value="3">03</option> ........................................................ ........................................................ option value="11">11</option> <option value="12">12</option> </select> |
In questo caso, è ovvio scegliere una sola alternativa. Per visualizzare una
riga alla volta, è importare attribuire uno (o alcun valore, omettendo
l'attributo) a size nel tag <select>. L'attributo selected nel tag <option> segnala il valore di default al caricamento
della pagina. Determinata la scelta da parte dell'utente, sarà dunque
restituito un solo valore.
Si può anche notare nella prima opzione, e così fino alla nona, come
l'attributo value sia 1, benché sia visualizzato 01. Se l'attributo value fosse
stato omesso, il valore sarebbe stato 01, ovvero sarebbe stato letto dal server,
come valore,
il testo tra i tag <option></option>.
| Metodi | |
|---|---|
| blur() | rimuove lo stato attivo dall'opzione nella casella di riepilogo |
| focus() | attiva il fuoco sull'opzione nella casella di riepilogo |
| Proprietà | |
| form | restituisce il nome del form che contiene l'opzione nella casella di riepilogo |
| length | restituisce il numero delle opzioni nella casella di riepilogo |
| name | restituisce il nome della casella di riepilogo |
| options | restituisce un Array relativo alle opzioni presenti nella casella di riepilogo |
| selectedIndex | restituisce il numero dell'opzione selezionata nella casella di riepilogo |
| text | restituisce il testo tra i tag <option></option> |
| type | restituisce l'attributo type |
Eventi principali supportati da MSIE per il tag SELECT:
Rifacendosi all'esempio precedente, il codice per recuperare il valore selezionato nella casella di riepilogo sarebbe il seguente:
| x=formMesi.Mesi[Mesi.selectedIndex].value;
alert('Legge il valore: ' + x); y=formMesi.Mesi[Mesi.selectedIndex].text; alert('l\'attributo text è ' + y)" |
Questo perché il codice formMesi.Mesi[Mesi.selectedIndex]
nella
rappresentazione a punti significa:
"l'opzione selezionata nell'istanza Select chiamata Mesi presente
nel form formMesi".
Mesi.SelectedIndex restituisce esattamente il numero dell'opzione selezionata, a partire da zero. Questo numero, corrisponde all'indice dell'Array formMesi.Mesi.
Un altro utilizzo dell'oggetto Select, è quello di permettere una scelta multipla:
Nello specifico caso, il tag select comprenderà questi attributi:
<select size="3" name="L1" multiple>
Il codice per recuperare i valori della selezione multipla sarà:
| function checkValue(MiaSelect) { var Testo=new String(''); for(i=0; i<MiaSelect.length; ++i) if(MiaSelect.options[i].selected) Testo=Testo + MiaSelect.options[i].value + ';\n'; alert(Testo); } |
La differenza rispetto al codice precedente, oltre al ciclo, necessario per controllare la selezione di più opzioni, è relativa allo sfruttamento dell'Array options[i], un secondo modo per arrivare al valore della/e opzione/i selezionate.
Per fare riferimento agli elementi option presenti in una SELECT, è possibile anche riferirsi alle proprietà della collection options:
| Proprietà | |
|---|---|
| defautlSelected | si riferisce all'opzione selezionata per default |
| index | si rifersce al numero dell'opzione a partire da zero |
| selected | si riferisce all'opzione selezionata nella casella |
| text | si riferisce al testo dell'opzione |
| value | si riferisce al valore dell'opzione |
Esiste un ulteriore modo per permettere la scelta di più opzioni per volta.
Si usa in questo caso un'istanza Checkbox.
| Metodi | |
|---|---|
| blur() | rimuove lo stato attivo dalla casella di controllo |
| click() | richiama l'evento click sulla casella di controllo |
| focus() | attiva il fuoco sulla casella di controllo |
| Proprietà | |
| checked | restituisce true se la casella è stata selezionata, viceversa restituisce false |
| defaultchecked | è un riferimento all'attributo checked che esprime la casella di controllo selezionata di default al caricamento della pagina |
| form | restituisce il nome del form che contiene la casella di controllo |
| name | restituisce il nome della casella di controllo |
| type | restituisce l'attributo type |
| value | restituisce l'attributo value |
Eventi principali supportati da MSIE per il controllo CHECKBOX:
Nota: perché alcuni eventi abbiano effetto, è necessario che il controllo abbia il focus.
Sempre prendendo in considerazione l'esempio delle lingue straniere:
Un esempio di codice che può permettere il recupero dei valori dalle caselle di controllo è il seguente:
|
<input type="checkbox" name="L2"
value="Francese" checked> <input type="checkbox" name="L2" value="Inglese" checked> <input type="checkbox" name="L2" value="Tedesco"> <input type="checkbox" name="L2" value="Spagnolo"> <input type="checkbox" name="L2" value="Russo"> function checkValue2() { var Testo= new String(''); for (i=0; i<document.formL2.elements.length; ++i) if(document.formL2.elements[i].type=='checkbox' && document.formL2.elements[i].checked) Testo+=document.formL2.elements[i].value + ';\n'; alert(Testo); } |
Questo esempio sfrutta l'Array elements dell'oggetto form.
In realtà, sarebbe meglio utilizzare le caselle di controllo come campi a sé stanti, con valore vero o falso, on o off, quindi con un nome univoco.