Form dinamico con jQuery

Oggi vi propongo un uso della libreria jQuery diverso da quello prettamente grafico per cui è solitamente utilizzato:  mi sono servito di questa infatti per conferire dinamicitità ad un form costituito da più schede da compilare obbligatoriamente.

DEMO - Form Dinamico

Il compito di jQuery è quello di gestire il passaggio tra le varie schede e di controllare la corretta compilazione di tutti i campi. Passiamo ai codici:

HTML

Come potete notare i blocchi sono disposti uno sopra l’altro in base a diversi valore di z-index che varieranno in base alla scheda da visualizzare: la scheda “attuale”, quella visibile, avrà il valore più alto mentre quelle nascoste avranno un valore più basso.

 
<form method="post" action="#">
<ul class="titles">
     <li class="titolo_blocco n_1 sel"><div><h2>Generalità</h2></div></li>
     <li class="titolo_blocco n_2"><div><h2>Contatti</h2></div></li>
     <li class="titolo_blocco n_3"><div><h2>Social Network</h2></div></li>
</ul>
<div class="list_blocco">
<ul class="blocco n_1 active">
     <li><label>Nome</label><input type="text" name="nome"/></li>
     <li><label>Cognome</label><input type="text" name="cognome"/></li>
     <li><label>Nickname</label><input type="text" name="nickname"/></li>
     <li><label>Città</label><input type="text" name="città"/></li>
</ul>
<ul class="blocco n_2 inactive">
     <li><label>E-mail</label><input type="text" name="email"/></li>
     <li><label>Telefono</label><input type="text" name="telefono"/></li>
     <li><label>Cellulare</label><input type="text" name="cellulare"/></li>
</ul>
<ul class="blocco n_3 inactive">
     <li><label>Facebook</label><input type="text" name="facebook"/></li>
     <li><label>Twitter</label><input type="text" name="twitter"/></li>
     <li><label>Google+</label><input type="text" name="googleplus"/></li>
</ul>
<br />
<div id="submit_box"></div>
</div>
</form>
 

CSS

Form.css

JQUERY

Ed eccoci all’aspetto fondamentale di questo form!

Il codice, come già anticipato, si occuperà di gestire lo spostamento da una scheda all’altra in seguito a due condizioni: il click diretto dell’utente su un’altra categoria oppure il completamento della scheda precedente. Lo spostamento è gestito dalla funzione cambia_scheda(). Quando tutti i campi risulteranno compilati si potrà cliccare sul bottone Submit che comparirà!

 
$(document).ready(function() {
      var scheda_attuale = 1;
      var tot_schede = $('.titles').children().size();
      // cambio blocco al click!
      $('.titolo_blocco').click(function()
      {
            $('.sel').toggleClass('sel');
            var classe = $(this).attr('class');
            var num = classe.substring(16,classe.length);
            console.log(num);
            cambia_scheda(num);
            scheda_attuale = num;
            $(this).toggleClass('sel');
        });
 
        var totale = 0;
        var avanzamento = 0;
        var testo_inserito = '';
        var tot_blocchi = (($('.list_blocco').children().length));
        // creo un array tot_blocchix2
        completamento = Array();
        var completati = Array();
        for (i = 1; i <= tot_blocchi; i++)
        {
              completamento[i] = 0;
              completati[i] = 0;
        }
        var res = 0;
        // funzione eseguita quando un campo viene compilato     
        $('input').change(function() {
           // blocco di appartenenza
           var blocco = $(this).parent().parent('.blocco').attr('class');
           var num = blocco.substring(9,10);
           // totale campi
           tot_campi = $('.blocco.n_'+num).children().length;
           testo_inserito = $(this).val();
           if (testo_inserito != '' & completamento[num] < tot_campi){
           completamento[num]++;
         }
         else if (testo_inserito == '')
            {
                 completamento[num]--;
                 if ($('#submit_box').html() != '') // c'è già il submit
                 {
                       $('#submit_box').html("");
                 }
                }
                // se è completo passo all'altra scheda
           if (completamento[num] == tot_campi)
           {
                // aggiorno array completati
                completati[scheda_attuale] = 1;
                // prossima scheda
                if (scheda_attuale != tot_schede) // se non sono già all'ultima...
                {
                    cambia_scheda(++scheda_attuale);
                    $('.sel').toggleClass('sel');
                    $('.titolo_blocco.n_'+scheda_attuale).toggleClass('sel');
                }
                else
                {
                   // devo controllare però che tutte le schede siano effettivamente complete
                   for (i = 1; i <= tot_schede; i++)
                     {
                          res += completati[i];
                     }
                    if (res == tot_schede)
                    {
                         // faccio comparire il tasto submit!
                         $('#submit_box').html('<input type="submit" id="submit" val="Invia" />');
                     }
                     res = 0;
                       }
                }
              });
  });
  function cambia_scheda(num)
  {
          // sfumo il blocco attuale
          $('.active').animate({opacity:0},250,function()
          {
               // rendo inactive tutti i blocchi
               $('.active').toggleClass('active').toggleClass('inactive');
               // opacizzo il blocco selezionato
               $('.blocco.n_'+num+'.inactive').animate({opacity:1}