Mostrare o nascondedre porzioni di Form

Gli argomenti di questa pagina

  • Perchè nascondere porzioni di form
  • Prima soluzione
  • Il JS
  • Il form
  • L'esempio in pratica

Perchè nascondere porzioni di form

Può succedere che presentando un FORM all'utente ci si trovi nella necessità di mostrare o nascondere porzioni di FORM in base a delle scelte sul tipo di input.
Mi vengono in mente alcune delle possibili scelte che si possono fare durante la compilazione di un modulo:

  • Inserire l'anagrafica di un minorenne o di un maggiorenne
  • Prenotare un viaggio che può essere effettuato tramite pullman, treno, aereo, nave
  • Prenotazione camere per singolo, coppia, famiglia

sarebbe comodo che in questi casi il form si presentasse con i giusti campi e non, comunque, con tutti i campi, siano essi necessari o inutili a seconda delle circostanze.

Prima soluzione

Mostrare una parte di form a seconda che l'anagrafica che dobbiamo inserire si riferisce ad un soggetto Minorenne o Maggiorenne. Per far questo usiamo due radio:

  • un primo radio nasconde una porzione di form
  • un secondo radio mostra la porzione inizialmente nascosta

Il JS

Il JS necessario per questo scopo è semplice:

  • la funzione show() mostra la parte nascosta
  • la funzione hide() nasconde la porzione fi form
1
2
3
4
5
6
7
function show() {
    document.getElementById('min').style.display = 'block';
}
function hide() {
    document.getElementById('min').style.display = 'none';
}

Il form

Nel form troviamo questi elementi:

  1. una tabella esterna
  2. una prima tabella nidificata subito sotto la prima <tr><td> della tabella esterna che si riferisce all'allievo
  3. la chiusura della </td></tr> della tabella esterna
  4. nella riga successiva troviamo due radio che permettono di scegliere se l'anagrafica che si sta inserendo si riferisce ad un adulto
  5. segue una ulteriore apertura della coppia di <tr><td> della tabella
  6. segue una seconda tabella nidificata per l'anagrafica del tutore
  7. subito sotto questa seconda tabella nidificata viene chiusa la riga della tabella esterna e subito aperta un'altra
    </td></tr>
    <tr><td>
  8. la terza tabella nidificata contiene alcuni campi comuni alle prime due tabelle nidificate
  9. alla fine della terza tabella nidificata, la tabella esterna continua con la presentazione del pulsante submit per inviare l'intero form

E' da prestare attenzione ai nomi che si assegnano ai controlli di entrambe le porzioni del form che, anche se racchiusi in tre tabelle, formano un unico array $_POST[] e debbono quindi essere tutti univoci perchè, in caso contrario, se due controlli hanno lo stesso nome, il secondo sovrascrivereà il primo.

Quando si andrà a processare il form saranno letti tutti i controlli, nascosti o visibili che siano, perciò, anche se si riferiscono allo stesso tipo di dato (nome dell'allievo e nome del tutore) i controlli debbono necessariamente avere nomi differenti.
Sarà quindi compito del programmatore decidere quali controlli debbono essere letti.

Per nascondere la porzione di form che dovrà essere visualizzata solo se lo si desidera, si imposta il display a none alla <tr> che contiene la porzione da nascondere:
<tr id="min" style="display:none;">.

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
119
120
121
122
123
124
125
126
<form name="modulo" method="post" action="pop_show_post.php">
<table class="tabella_italic">
<tr>
<td colspan="2">
<!--    ===================================================================================        -->
    <table>
    <tr>
    <th colspan="2">Anagrafica allievo</th>
    </tr>
    <tr>
    <td>Cognome</td>
    <td><input type="text" name="cognome" size="30" /></td>
    </tr>
    <tr>
    <td>Nome</td>
    <td><input type="text" name="nome" size="30" /></td>
    </tr>
    <tr>
    <td>Città</td>
    <td><input type="text" name="citta" size="30" /> </td>
    </tr>
    <tr>
    <td>Prov</td>
    <td><input type="text" name="prov" size="30" /> </td>
    </tr>
    <tr>
    <td>CAP</td>
    <td><input type="text" name="cap" size="30" /> </td>
    </tr>
    <tr>
    <td>Indirizzo</td>
    <td><input type="text" name="indirizzo" size="30" /> </td>
    </tr>
    <tr>
    <td>Nato a</td>
    <td><input type="text" name="nato_a" size="30" /> </td>
    </tr>
    <tr>
    <td>Nato il</td>
    <td><input type="text" name="nato_il" size="30" /> </td>
    </tr>
    </table>
<!--    ===================================================================================        -->
</td>
</tr>
<tr>
<th colspan="2">
settori: 
<label>Maggiorenne <input type="radio" name="type" value="magg" checked="checked" onclick="hide();" /></label> 
<label>Minorenne <input type="radio"  name="type" value="min" onclick="show();"/></label><br />
qui le scelte da <br />
effettuare per mostrare o<br />
nascondere i campi aggiuntivi 
</th>
</tr>
<tr id="min" style="display:none;">
<td colspan="2">
<!--    ===================================================================================        -->
    <table>
    <tr>
    <th colspan="2">Anagrafica Tutore</th>
    </tr>
    <tr>
    <td>Cognome</td>
    <td><input type="text" name="tut_cognome" size="30" /></td>
    </tr>
    <tr>
    <td>Nome</td>
    <td><input type="text" name="tut_nome" size="30" /></td>
    </tr>
    <tr>
    <td>Città</td>
    <td><input type="text" name="tut_citta" size="30" /> </td>
    </tr>
    <tr>
    <td>Prov</td>
    <td><input type="text" name="tut_prov" size="30" /> </td>
    </tr>
    <tr>
    <td>CAP</td>
    <td><input type="text" name="tut_cap" size="30" /> </td>
    </tr>
    <tr>
    <td>Indirizzo</td>
    <td><input type="text" name="tut_indirizzo" size="30" /> </td>
    </tr>
    <tr>
    <td>Nato a</td>
    <td><input type="text" name="tut_nato_a" size="30" /> </td>
    </tr>
    <tr>
    <td>Nato il</td>
    <td><input type="text" name="tut_nato_il" size="30" /> </td>
    </tr>
    </table>
<!--    ===================================================================================        -->
</td>
</tr>
<tr>
<td colspan="2">
    <table>
    <tr>
    <td>Documento</td>
    <td><input type="text" name="documento" size="30" /> </td>
    </tr>
    <tr>
    <td>Telefono</td>
    <td><input name="Tel" type="text" size="30" /></td>
    </tr>
    <tr>
    <td>Indirizzo eMail</td>
    <td><input name="mail" type="text" size="30" /></td>
    </tr>
    </table>
</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<!-- <td>&nbsp;</td> -->
<td colspan="2"><input type="submit" name="submit" value="INVIA" /></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