Come nascondere le domande
Nella realizzazione dei moduli online, è bene tener presente che, nelle domande dove le risposte devono attivare domande successive, è necessario l'uso di caselle di controllo o di radio bottoni, ossia di quegli elementi del form che necessitano di un clic dell'utente per essere attivati.
Per poter nascondere delle domande è necessario, come prima cosa, che queste siano rinchiuse o in una tabella, o in un DIV, e che venga nascosta con l'apposita opzione dei fogli di stile, in modo da non visualizzare la domanda all'apertura del modulo. Inoltre, è necessario che venga associato un ID univoco all'elemento scelto.
Per evitare di fare errori e bene scriversi tutte le domande su un foglio prima di cominciare e prendere nota degli ID che inseriremo e delle tabelle nascoste, questo rende più semplice compilare lo script, aiutando ad evitare eventuali errori di disattenzione.
La prima riga della tabella o del DIV che contengono la domanda da nascondere deve, quindi, contenere i codici id="elemento1" style="display:none":
Esempio:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="elemento1" style="display:none">
L'ID utilizzato nell'esempio può, naturalmente, chiamarsi in qualsiasi modo, il suggerimento che possiamo darvi, è quello di utilizzare una parola o anche una sola lettera con associato un numero sequienziale, questo rende più semplice e immediata la lettura dello script.
Lo script di attivazione/disattivazione delle domande
Una volta terminata la realizzazione del form con tutti gli ID e le domande nascoste con gli appositi codici descritti qua sopra, passiamo alla realizzazione dello script che si compone di due semplici parti: una associata alla casella di controllo o nel radio bottone e l'altra nell'head della pagina.
Poniamo che abbiamo una domanda con un opzione A e un opzione B, l'opzione A apre la domanda 2, se invece si fa clic sull'opzione B la domanda 2 resta nascosta.
In questo esempio utilizziamo un radio bottone, ma è lo script è identico anche nel caso di una casella di controllo:
<input type="radio" name="opt_1" value="No" onClick="mod1(elemento1);">
<input type="radio" name="opt_1" value="Si" onClick="mod2(elemento1);">
Come si vede lo script è composto da tre parti: la prima onClick indica che lo script deve attivarsi quando si fa clic sul radio bottone, la seconda, mod1 e mod2 indicano il nome dello script da richiamare nell'head della pagina, infine elemento1 è l'ID che abbiamo utilizzato nella tabella da nascondere.
Nell' head della pagina inviece inseriamo questo script:
<SCRIPT LANGUAGE="JavaScript">
function mod1(a) {
{elemento1.style.display='';} }
function mod2(a) {
{elemento1.style.display='none';} }
</SCRIPT>
Come si vede mod1 e mod2 sono gli script richiamati dai due radio bottoni che abbiamo inserito prima, il primo mostra la domanda il secondo la nasconde. Ovviamente elemento1 è l'ID della tabella o del DIV, gli apostrofi vuoti indicano che l'elemento è visibile, mentre se c'è scritto none è invisibile.
In pratica cosa succede? lo stile associato alla tabella o al DIV viene sovrascritto dallo script rendendola visibile in un caso e invisibile nell'altro.
Conclusione
Per rendere le cose più chiare, vediamo un esempio completo con il codice composto in tutte le sue parti:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function mod1(a) {
{elemento1.style.display='';} }
function mod2(a) {
{elemento1.style.display='none';} }
</SCRIPT>
</head>
<body>
<form>
Ti è piaciuto questo articolo?<br/>
No <input type="radio" name="opt_1" value="Si" onClick="mod1(elemento1);"><br />
Si <input type="radio" name="opt_1" value="Si" onClick="mod2(elemento1);">
<table id="elemento1" style="display:none">
<tr>
<td>
Vuoi darci un suggerimento?
<input name="opt_2" type="textarea" id="opt_17" value="commento" />
</td>
<tr>
<table>
</form>
</body>
</html>
Adesso non vi resta che sperimentare questo script sui vostri moduli per indagini online.
|
