Lo scenario d'uso per il semplice script che proponiamo in questo appuntamento potrebbe essere questo. Abbiamo un form, magari piuttosto complesso, di quelli che possono indurre in errore gli utenti meno avvezzi alla compilazioni di moduli sul web. Abbiamo un campo di testo, ma vogliamo che sia attivo e compilabile solo se l'utente ha operato una certa scelta, che farà spuntando un checkbox. Ecco, a voi sostituire il generico con il concreto, con l'applicazione pratica. Qui ci limitamo a fornirvi gli strumenti per implementare una cosa di questo tipo.
E partiamo come al solito dall'esempio. È l'unico file presente all'interno dello zip allegato al tutorial. Il codice Javascript è infatti incorporato nel documento.
Vediamolo subito questo codice:
<script type="text/javascript">
function CheckCheckBox(frm)
{
if (!frm.CheckThis.checked)
frm.CheckThis.focus()
}
</script>
Si tratta di un'unica funzione: CheckCheckBox. Prende come parametro il riferimento ad un form presente nella pagina. Come vedremo, tale funzione viene richiamata quando il focus si sposta sul campo di testo. A quel punto, se il checkbox non è stato spuntato (if (!frm.CheckThis.checked)), il focus si sposta di nuovo sul checkbox (frm.CheckThis.focus()). Sembra complicato, ma basta eseguire l'esempio per comprendere tutto.
Nella parte HTML abbiamo il form:
<form>
<p><input type="checkbox" name="CheckThis">
Per inserire il tuo nome spunta il checkbox.</p>
<p>
Nome:
<input type="text" name="UserName" onfocus="CheckCheckBox(this.form)"></p>
</form>
Come si vede, a livello del campo di testo identificato con il nome UserName, applichiamo, con l'evento onfocus, quanto visto prima. Richiamiamo, cioè, la funzione passando come parametro il riferimento al form che contiene il campo di testo (this.form). Semplice ed efficace.
