Il codice di questa settimana ci permetterà, in modo semplice e veloce, di creare un modulo che potrà essere inviato solamente se verrà spuntato un checkbox di controllo. Lo script è utile in quei casi, ad esempio, in cui si vuole essere sicuri che l'utente abbia accettato i termini di un contratto.
Non avremo problemi di compatibilità con i maggiori browser in circolazione: Explorer 5.x, Netscape 6.x e Netscape 4.x.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Prima di tutto inseriamo questo codice tra i tag <head> della pagina in cui è contenuto il modulo:
<script type="text/javascript" language="javascript">
<!--
var checkobj
function accetta(el){
checkobj=el
if (document.all||document.getElementById){
for (i=0;i<checkobj.form.length;i++){
var tempobj=checkobj.form.elements[i]
if(tempobj.type.toLowerCase()=="submit")
tempobj.disabled=!checkobj.checked
}
}
}
function disabilita(el){
if (!document.all&&!document.getElementById){
if (window.checkobj&&checkobj.checked)
return true
else{
alert("Per favore accetta i termini del contratto")
return false
}
}
}
-->
</script>
Il codice appena inserito non richiede alcuna personalizzazione.
A questo punto possiamo costruire un semplicissimo modulo a cui, in seguito, aggiungeremo alcuni elementi per completare lo script.
Partiamo da un form di questo tipo:
<form name="modulo">
Nome:
<input name="nome" type="text" size="28">
Contratto:
<textarea rows="5" cols="30" wrap=virtual>etc etc etc</textarea>
<input type="Submit" value="Invia!" disabled>
</form>
Supponiamo di voler essere sicuri che l'utente, prima di inviare il modulo, abbia accettato i termini del nostro contratto. Basterà modificare il form precedente in questa maniera:
<form name="modulo" onSubmit="return disabilita(this); return false">
Nome:
<input name="nome" type="text" size="28">
Contratto:
<textarea rows="5" cols="30" wrap=virtual>etc etc etc</textarea>
<input name="chekka" type="checkbox" onClick="accetta(this)"><strong>Accetta i termini del contratto</strong>
<input type="Submit" value="Invia!" disabled onClick ="document.modulo.submit()">
</form>
<script type="text/javascript" language="javascript">
document.forms.modulo.chekka.checked=false
</script>
Come potete notare abbiamo inserito:
1) una funzione di controllo (con evento onSubmit) nel tag <form...> ("return false" serve per impedire l'invio del modulo premendo il tasto INVIO)
2) un checkbox chiamato "chekka" con il richiamo alla funzione "accetta"
3) subito dopo la chiusura del tag </form> è stata inserita una stringa di codice. è importante che il terzo nome della stringa sia identico a quello dato al modulo mentre il quarto elemento dovrà avere uguale al nome dato al checkbox.
Altre personalizzazioni non sono necessarie.
Ovviamente, prima di concludere, ricordo che si tratta pur sempre di javascript (che lavora lato client) e quindi ci sono tutti i limiti del caso. Ad esempio se l'utente disabilitasse l'esecuzione di javascript sul proprio browser il controllo non avverrebbe.
