Forzare Termini e Condizioni? Rapido! Checkbox e submit in abbinata!

Poche righe ci servono per forzare un utente ad accettare il classico quadratino dei Termini e delle Condizioni senza il quale non potranno avanzare.
Come fare? Con jQuery ovviamente e 10 semplici righe!


<script>
$("#checkboxTermini").click(function() {
 var checked_status = this.checked;
 if (checked_status == true) {
 $("#submitForm").removeAttr("disabled");
 } else {
 $("#submitForm").attr("disabled", "disabled");
 }
});
</script>

Con questo codice analizziamo il checkbox che avrà l’id “checkboxTermini” e quando cliccato andrà ad abilitare o disabilitare il tasto di invio del form che avrà l’id “submitForm”. Semplice no?

Vediamo il semplice form (che poi modificheremo in base alle esigenze):


<form>

Accetta <a href="/terminiecondizioni.html">Termini e Condizioni</a></span>
<input type="checkbox" id="checkboxTermini" />

<!-- FONDAMENTALE! il disabled="disabled" nel tasto di invio! -->
<input type="submit" id="submitForm" disabled="disabled" value="Invia Form" />

</form>

Come vediamo il codice è basico: un  form con un checkbox ed un tasto di invio form che, come scritto nel commento, DEVE essere disabled, ovvero disabilitato.
Tutto qui. Rapido anche questo vero?

Per finire andiamo ad inserire una linea di codice che ci caricherà jQuery (l’ultimissima versione) se non è già stato caricato nella vostra pagina:


<script type="text/javascript"> if (window.jQuery == undefined) document.write( unescape('%3Cscript src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"%3E%3C/script%3E') );</script>

Fine 🙂

N.d.A. Se ti chiedi il perché gli ID dei campi siano importanti, beh la risposta è semplice: è il modo migliore per far capire al nostro codice chi deve osservare di preciso e cosa fare nel caso si verifichi un evento in particolare (come un click sul nostro checkbox). Non dare mai un ID uguale a più campi nella stessa pagina o il sistema non saprà a quale rivolgersi!

Annunci

, , , , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: