Javascript - Form

Oggetto Form

Durante la lettura di un file html, viene creato una array con tante celle quanti sono i moduli all’interno del file.

document.forms[]

Poprietà

document.forms[].length

document.forms[].action

document.forms[].method

document.forms[].name

document.forms[].enctype

document.forms[].elements[]

Accesso agli elementi

document.forms[].elements[] è a sua volta un array con tante celle quanti sono gli elementi del modulo.

document.forms[0].elements[4]

document.forms[2].elements[3]

Riferirsi al form e ai suoi elementi usando gli array corrispondenti non è l'unico modo per individuare gli elementi dei form.

Vale sempre la possibilita’ di attribuire un nome (name) al form e ai suoi elementi.

È fondamentale dare dei nomi e/o degli id ai moduli e ai loro elementi.

I nomi permettono di distinguere tra i dati che vengono inviati al server.

Ogni volta che si introduce un nome, l’interprete JavaScript crea una proprietà corrispondente.

Eventi

Textarea, select(option) à onChange, onFocus, onBlur

Hidden: campo nascosto, non sente nessun evento.

Reset/submit à onClick, onFocus, onBlur, onSubmit, onReset

Ogni volta che con il mouse si clicca su un elemento di un form viene generato un evento.

Se esiste un gestore per l’evento, vengono mandate in esecuzione le istruzioni JavaScript corrispondenti.

<form name="form1">
<input type="button" name="b1" value="Cambia colore" onClick="document.bgColor=‘yellow’;">
</form>

Value

Tutti gli elementi di un modulo hanno un valore che in JavaScript si legge grazie alla proprietà value.

Il valore può essere:
Il valore dell’elemento specificato nell’attributo value.
Il valore fornito in input dall’utente.

Esempio:
var prova=form1.b1.value
(prova conterra’ il valore del bottone – ovvero “Cambia colore”)

Radio e checkbox

I bottoni radio e checkbox hanno anche la proprietà checked.
document.form.rd1.checked
if (document.form.rd1.checked==true)

Select e Option

Gli oggetti select e option permettono di creare menu a discesa.

Tra le proprieta’ di select, le piu’ importanti sono:

selectedIndex (restituisce l’indice della voce del menu a discesa selezionata dall’utente).

options[] (restituisce un’array contenente le opzioni della lista)
i = document.frm1.sel1.selectedIndex (memorizza nella variabile i l’indice dell’opzione selezionata).
document.frm1.sel1.options[i].value (restituisce il valore dell’opzione selezionata)

Tra le proprieta’ di option, la piu’ importante e’:
selected (restituisce un valore booleano. Se l’opzione e’ quella selezionata restituisce true, altrimenti false)
if (document.forms[0].elements[0].options[0].selected) {
alert(“hai selezionato il primo elemento");
}

Invio

Al momento dell’invio di un modulo, oppure quando si vogliono cancellare i campi, si possono fare dei controlli mediante i gestori di eventi onSubmit e onReset

<form name="frm1" method="post" action="…"
onSubmit="return controlla();"
onReset="return conferma_canc();">

Se le funzioni controlla() e conferma_canc() restituiscono false le azioni corrispondenti vengono impedite.

Si può verificare:
Che l’utente abbia inserito i tutti i dati nei campi obbligatori.
Il formato dell’input sia corretto.