Mostrare o nascondedre porzioni di Form

Gli argomenti di questa pagina

  • Ancora su show/hide dei campi del form
  • Seconda soluzione
  • Il JS
  • Il form
  • L'esempio in pratica

Ancora su show/hide dei campi del form

Questo potrebbe essere un altro metodo per usare in modo ottimale un FORM complesso.

Seconda soluzione

Questa volta facciamo uso di una <select> che è più malleabile e men o ingombrante dei <radio>.
In questa SELECT abbiamo alcune voci:

  • "sett 1" => Settore 1
  • "sett 2" => settore 2
  • "varie 1" => Varie 1
  • "varie 2" => Varie 2
  • "sett 3" => Settore 3
  • "sett 4" => Settore 4
  • "varie 3" => Varie 3
  • "varie 4" => Varie 4

Questa volta vorremmo far questo:

  • scegliendo sett 1 o sett 2 vorremmo vedere il blocco2
  • scegliendo sett 3 vorremmo vedere il blocco1
  • Scegliendo sett 4 vorremmo vedere il blocco1 ed il blocco2

Il JS

Anche in questo caso il JS non è complesso, ma abbastanza comprensibile.

Si fa uso del costrutto switch - case che è simile all'altro costrutto IF ELSE IF.

  • Scegliendo sett 1 e sett 2 il blocco_2 viene nascosto ed il blocco_1 viene visualizzato
  • Scegliendo sett 3 il blocco_2 viene mostrato ed il blocco_1 viene nascosto
  • Scegliendo sett 4 vengono mostrati entrambi i blocchi
  • In tutti gli altri casi entrambi i blocchi rimangono nascosti
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function codice(variabile) {
    switch(variabile) {
    case 'sett 1':
    case 'sett 2':
        document.getElementById('blocco_2').style.display='none';
        document.getElementById('blocco_1').style.display='';
        break;
    case 'sett 3':
        document.getElementById('blocco_2').style.display='';
        document.getElementById('blocco_1').style.display='none';
        break;
    case 'sett 4':
        document.getElementById('blocco_2').style.display='';
        document.getElementById('blocco_1').style.display='';
        break;
    default:
        document.getElementById('blocco_2').style.display='none';
        document.getElementById('blocco_1').style.display='none';
    }
}

Il form

Nel form troviamo questi elementi:

  • Una tabella esterna che contiene i controlli del form sempre presenti
  • La SELECT permette di scegliere se visualizzare o meno un determinato gruppo di controlli
    questa select invoca la funzione JS codice() per mezzo del controllo dell'evento onChange
  • due altre tabelle nidificate delimitate da due DIV rintracciabili dalla funzione JS tramite id="blocco_1" e che all'apertura rendono i blocchi invisibile tramite la proprietà style="display:none;"
  • dopo le due tabelle nidificate si continua con la tabella esterna che contiene altri controlli comuni a tutto il form, compreso il pulsante di invio

Per nascondere la porzione di form che dovrà essere visualizzata solo se lo si desidera, si imposta il display a none al <div> che contiene la tabella da nascondere:
<div id="blocco_1" style="display:none;">
<div id="blocco_2" style="display:none;">

Anche in questo caso è ovvio che occorre prestare grande attenzione nell'assegnate i nomi ai controlli facendo in modo che siano univoci. In caso contrario, nella pagina del processo al form, dei due controlli con nomi uguali, il primo viene sovrascritto e se ne perde eventuale valore.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
    <form name="modulo" method="post" action="pop_show2_post.php">
    <table class="tabella_italic">
    <tr>
    <td>Nome</td>
    <td><input type="text" name="textfield0" size="30" /> </td>
    </tr>
    <tr>
    <td>Cognome</td>
    <td><input type="text" name="textfield1" size="30" /> </td>
    </tr>
    <tr>
    <td>Citt&agrave;</td>
    <td><input type="text" name="textfield2" size="30" /> </td>
    </tr>
    <tr>
    <td>Settori</td>
    <td>
<!--    ==========================================================================================================  -->
    <select name="sector" onChange="codice(this.value);">
    <option value="">==</option>
    <option value="sett 1">Settore 1</option>
    <option value="sett 2">settore 2</option>
    <option value="varie 1">Varie 1</option>
    <option value="varie 2">Varie 2</option>
    <option value="sett 3">Settore 3</option>
    <option value="sett 4">Settore 4</option>
    <option value="varie 3">Varie 3</option>
    <option value="varie 4">Varie 4</option>
    </select><br />
    qui le scelte da <br />
    effettuare per mostrare o<br />
    nascondere i campi aggiuntivi 
<!--    ==========================================================================================================  -->
    </td>
    </tr>
    <tr>
    <td>Nazione</td>
    <td><input type="text" name="textfield3" size="30" /> </td>
    </tr>
    <tr>
    <td>Azienda</td>
    <td><input type="text" name="textfield4" size="30" /> </td>
    <tr>
    <td colspan="2">
<!--    ==========================================================================================================  -->
        <div id="blocco_1" style="display:none;">
        <table>
        <tr>
        <th colspan="2">Parte 1</th>
        </tr>
        <tr>
        <td>nome</td>
        <td><input type="text" name="textfield5" /></td>
        </tr>
        <tr>
        <td>cognome</td>
        <td><input type="text" name="textfield6" /></td>
        </tr>
        <tr>
        <td>città</td>
        <td><input type="text" name="textfield7" /></td>
        </tr>
        </table>
        </div>
<!--    ==========================================================================================================  -->
        <div id="blocco_2" style="display:none;">
        <table>
        <tr>
        <th colspan="2">Parte 2</th>
        </tr>
        <tr>
        <td>nome</td>
        <td><input type="text" name="textfield8" /></td>
        </tr>
        <tr>
        <td>città</td>
        <td><input type="text" name="textfield9" /></td>
        </tr>
        <tr>
        <td>indirizzo</td>
        <td><input type="text" name="textfield10" /></td>
        </tr>
        <tr>
        <td>CAP</td>
        <td><input type="text" name="textfield11" /></td>
        </tr>
        <tr>
        <td>provincia</td>
        <td><input type="text" name="textfield12" /></td>
        </tr>
        </table>
        </div> 
<!--    ==========================================================================================================  -->
    </td>
    </tr>
    <tr>
    <td>Indirizzo eMail</td>
    <td><input type="text" name="textfield13" size="30" /> </td>
    </tr>
    <tr>
    <td>Telefono</td>
    <td><input type="text" name="textfield14" size="30" /> </td>
    </tr>
    <tr>
    <td>Fax</td>
    <td><input type="text" name="textfield15" size="30" /> </td>
    </tr>
    <tr>
    <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
    <td><input type="hidden" name="hiddenField" value="hidden" /></td>
    <td><input type="submit" name="submit" value="INVIA" />
    <input type="reset" value="RESET" name="reset" /></td>
    </tr>
    </table>
    </form>

L'esempio in pratica

Apri popup per la prova

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum