Pagina 1 di 2
A volte è stato richiesto di poter di avere dei form che 
mostrano o nascondono dei campi o delle intere sezioni del form in funzione alle risposte che vengono inserite nei campi precedenti. Con Chronoforms è possibile avere questa funzionalità. Prendendo in prestito il nome dal settore aeronautico ho chiamato questi "form a geometria variabile". Supponiamo di voler realizzare un form che abbia i campi, in Figura 1, che descrivono lo status di una persona.
Dovremo pertanto realizzare preliminarmente un form che abbia i seguenti campi:Nome, Cognome campi testo;
Tre RadioButton con le opzioni: Single, Coniugato-a, Convivente;
Nome, Cognome coniuge o convivente campi di testo;
Un CeckBox per figli;
Due campi numerici interi per Maschi e Femmine;
Due RadioButton per nazionalità italiana o straniera;
Due campi di testo per Regione e Nazione;
I consueti bottoni di invio e reset.
Il form viene realizzato con l'uso del wizard di Chronoforms che consente appunto la creazione assistita. In questo caso noterete la presenza di quattro coppie di campi di testo sulla stessa riga. Per chi è interessato, informo che questo risultato è ottenuto con l'uso dello strumento Multiholder del wizard. Una volta realizzato il form procediamo normalmente, creando una tabella da associare ai campi del form e pubblichiamo il form. Ora possiamo agire per implementare le funzionalità che rendono possibile al form di aprirsi e chiudersi in funzione delle scelte nella fase di inserimento. Il risultato che otterremo è rappresentato dalla figura 2 che mostra il form nella configurazione minima.
Per fare questo useremo codice Javascript che inseriremo nel campo Form JavaScript: nella Tab Form Code del nostro form, figura 3. 
Il codice contenente le necessarie funzioni di Javascript andremo a prelevarlo da questo sito http://www.quirksmode.org/dom/usableforms.html . Sceglieremo la version 2.0.Form Javascript Cliccando su version 2.0 si aprirà una pagina con il codice javascript. Lo selezioneremo tutto e con copia incolla lo trasferiamo dentro la casella di testo associata al campo Form Javascript. L'unica variazione al codice che dovremo operare è quella di modificare la riga 15 nel seguente modo.Da così
var containerTag = 'TR';A così
var containerTag = 'DIV';
Questo consentirà al codice di agire sui tag DIV del nostro form anzichè sui tag TR originariamente previsti. Ma nulla esclude che con un form organizzato con tabelle si possa lasciare l'impostazione originaria. Dipende dalle situazioni decidere quale è la soluzione più opportuna. Il principio di funzionamento del Javascript è il seguente. Ogni campo del form che dovrà essere mostrato o nascosto deve essere contenuto all'interno di un tag div che qualificheremo con un nuovo attributo rel, ed indicherà al codice di mostrarlo o nasconderlo. Lo stesso attributo rel sarà associato all'elemento del form che lo attiverà. Vediamo l'esempio pratico.
<input value="figli" title="" id="check10" name="check1" type="checkbox" rel="figli"/>nella CeckBox che sarà spuntata se vi sono figli abbiamo creato l'attributo rel="figli". Questa attiverà la visualizzazione dei campi n. maschi e n. femmine.
<div rel="figli"> <label style="width: 100px;">Maschi n.</label> <input maxlength="2" size="2" title="" id="text_10" name="maschi" type="text" /></div>
<div rel="figli"> <label style="width: 100px;">Femmine n.</label> <input maxlength="2" size="2" title="" id="text_9" name="femmine" type="text" /></div>nelle div che contengono il campo di inserimento maschi e femmine abbiamo creato lo stesso l'attributo rel="figli". Questo ha il seguente significato. Quando la Ceckbox è selezionata, il codice Javascript visualizzerà i div con maschi e femmine. Quando non è selezionata li nasconderà.
Procederemo nello stesso modo anche per i RadioButton, con una piccola variante, i bottoni che non provocano modifiche al form saranno qualificati con l'attributo rel="none", quelli che invece attivano modifiche avranno un nuovo attributo rel diverso dagli altri precedentemente utilizzati. Vediamo l'esempio
<input value="Single" title="" id="radio00" name="radio0" type="radio" rel="none"/>
<input value="Coniugato-a" title="" id="radio01" name="radio0" type="radio" value="check" rel="con"/>
<input value="Convivente" title="" id="radio02" name="radio0" type="radio" value="check" rel="con"/>In questo caso per il radio relativo alla scelta single abbiamo usato l'attributo rel="none" perchè questa scelta non attiverà nulla. Per le altre due opzioni coniugato-a e convivente abbiamo usato l'attributo rel="con".
<div rel="con"> <label style="width: 150px;">Nome Coniuge/Convivente</label> <input maxlength="150" size="30" title="" id="text_5" name="nome_c" type="text" /> </div>
<div rel="con"> <label style="width: 150px;">Cognome Coniuge/Convivente</label> <input maxlength="150" size="30" title="" id="text_6" name="cognome_c" type="text" /> </div>nelle div che contengono il campo di inserimento nome_c e cognome_c abbiamo creato l'attributo rel="con". Quando verrà selezionato il radio single non accadrà nulla, quando invece viene selezionato uno degli altri due radio saranno visualizzati i campi di inserimento nome coniuge/convivente cognome coniuge/convivente.
L'ultima scelta è quella relativa alla nazionalità e sarà gestita nel seguente modo:
<input value="italiana" title="" id="radio20" name="radio2" type="radio" rel="ita"/>
<input value="straniera" title="" id="radio21" name="radio2" type="radio" rel="str"/>In questo caso c'è una variante, ogni radio ha una rel diversa il primo rel="ita" e il secondo rel="str".
<div rel="ita"> <label style="width: 80px;">Regione</label> <input maxlength="50" size="20" title="" id="text_14" name="regione" type="text" /> </div>
<div rel="str"> <label style="width: 80px;">Nazione</label> <input maxlength="50" size="20" title="" id="text_15" name="nazione" type="text" /> </div>Le div questa volta avranno una rel diversa coerente con quella dei rispettivi radio. Questo è tutto quello che dovremo fare per avere il form a geometria variabile, che assiste e guida l'utente negli inserimenti. I vari risultati ottenibili sono i seguenti.
I codici mostrati sono essenziali e dimostrativi del funzionamento. In realtà il form è un po' più complesso, ma nulla di particolare, a causa della formattazione da dare ai vari campi della pagina. In caso di div nidificati, che nella pratica sono necessari, gli attributi rel vanno inseriti in tutti i div padri e figli che interessano il campo da visualizzare o nascondere.Il funzionamento del form potrà essere visto in questa pagina.
Questo percorso che abbiamo fatto nell'uso di Chronoform, oltre alla soluzione presentata, insegna che l'uso di Javascript nella sezione Form JavaScript mette a disposizioni altre potenti funzionalità per i nostri form. Vedremo prossimamente altri usi di questa possibilità.
Vales
http://valesweb.altervista.org
Il codice completo del form è nella pagina seguente.
Commenta questo articolo sul forum
