Corsi on-line

jQuery e consenso per il trattamento dei dati personali

In questo breve tutorial vedremo con sia possibile sfruttare il framework JavaScript jQuery per aggiungere un controllo in un form che verifichi l’accettazione dell’informativa sulla privacy da parte dell’utente; nel caso specifico verrà analizzato il caso di un modulo per l’iscrizione ad una newsletter che prevede il completamento di due soli campi: quello relativo all’indirizzo di posta elettronica da utilizzare per le comunicazioni con l’iscritto e il campo relativo al consenso per il trattamento dei dati personali.

Avremo in sostanza un form sul modello di quello rappresentato nella figura seguente:

1

Il nostro modulo sarà contenuto il una propria div-box e conterrà soltanto il codice per i campi di input richiesti e quello per il pulsante d’invio; da notare come nell’esempio proposto il metodo per la spedizione dei parametri (“get”) sia stato specificato soltanto per completezza, esso potrà quindi essere omesso:

<div id="div_form">
<form name="iscrizione" method="get" action="#">
<div id="titolo_form"><h1>Modulo newsletter</h1></div>
<div id="div_email"><input id="email" name="email"></div>
<div id="checkbox"><input name="ctrlDatiPersonali" id="ctrlDatiPersonali" type="checkbox">
Dichiaro di aver letto l'<a target="_blank" href="#">informativa
sulla privacy ai sensi del Dlg 196/03</a> e do il consenso
al trattamento dei dati personali.</div>
<div id="invio"><input value="Spedisci" name="privacy" class="Spedisci" type="button"></div>
</form></div>

Per esigenze legate all’argomento trattato, nello script JavaScript non sarà presente il controllo relativo al formato per il campo “email”, verrà invece controllata la selezione (o meno) della checkbox “ctrlDatiPersonali”:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript">
  $(function() {
  	  $("input[name='privacy']").click(
        function(){
        	if ($("#ctrlDatiPersonali").is(":not(:checked)")){
           		alert("Attenzione! Non hai dato il tuo assenso per il trattamento dei dati personali.");
           		return;
           	} else {  document.forms['iscrizione'].submit(); alert("Grazie! Hai dato il tuo assenso per il trattamento dei dati personali."); }
        });
  });
 </script>

In pratica, la mancata selezione della checkbox porterà alla visualizzazione del seguente avviso:

Cattura2

Mentre la selezione della checkbox sarà confermata in questo modo:

Cattura3

Per comodità del lettore riporto l’intero sorgente della pagina contenente il form:

<!DOCTYPE html>
<html lang="it">
<head>
	<title>Newsletter</title>
  <style>
  body{font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; sans-serif; font-weight: 150;}
  .container{ width: 560px; margin: 0 auto; padding: 0; overflow: hidden; }
  </style>
</head>
<body>
<div class="container">
<div id="div_form">
<form name="iscrizione" method="get" action="#">
<div id="titolo_form"><h1>Modulo newsletter</h1></div>
<div id="div_email"><input id="email" name="email"></div>
<div id="checkbox"><input name="ctrlDatiPersonali" id="ctrlDatiPersonali" type="checkbox">
Dichiaro di aver letto l'<a target="_blank" href="#">informativa
sulla privacy ai sensi del Dlg 196/03</a> e do il consenso
al trattamento dei dati personali.</div>
<div id="invio"><input value="Spedisci" name="privacy" class="Spedisci" type="button"></div>
</form></div>
</div>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript">
  $(function() {
  	  $("input[name='privacy']").click(
        function(){
        	if ($("#ctrlDatiPersonali").is(":not(:checked)")){
           		alert("Attenzione! Non hai dato il tuo assenso per il trattamento dei dati personali.");
           		return;
           	} else {  document.forms['iscrizione'].submit(); alert("Grazie! Hai dato il tuo assenso per il trattamento dei dati personali."); }
        });
  });
 </script>
</body>
</html>

Naturalmente, lo stesso tipo di controllo potrà essere esteso ad altre checkbox che non siano necessariamente quelle relative all’informativa sui dati personali.

Post correlati
I più letti del mese
Tematiche