Ho avuto spesso bisogno di visualizzare in un form un campo di testo in base ad una scelta, effettuata da una dropdownlist o un radiobutton, naturalmente stiamo parlando di un form realizzato con chronoforms V5.
Nell'esempio visualizzato sotto, abbiamo 4 opzioni (naturalmente il numero delle opzioni ed i campi abbinati li deciderete voi) e a secondo di quale opzione si scelga verrà visualizzato un messaggio; inserendo inoltre una classe css diversa per ogni messaggio otteniamo un gradevole effetto visivo.
Come al solito non mi soffermerò sui particolari, se usate chronoforms saprete già come muovervi, altrimenti vi rimando alla lettura della realizzazione dei forms di base.
Nella zona DESIGNER inserite un elemento radiobox oppure una dropdown con le opzioni che vi servono (nell'esempio ne ho inserite 4), successivamente inserite un contenitore per ogni scelta/opzione impostato su DIV.
Dentro ogni contenitore inserite un elemento custom impostato su pure code yes e nella zona code inserite il vostro messaggio. Usando le classi Bootstrap sarà possibile visualizzare uno sfondo colorato a seconda della classe:
<div class="alert alert-success">...</div> <div class="alert alert-info">...</div> <div class="alert alert-warning">...</div> <div class="alert alert-danger">...</div>
Adesso agendo nella sezione events del radiobox o dropdownlist inserite le condizioni per visualizzare o meno i campi custom, quindi facendo riferimento al naming che ho utilizzato per i nomi dei contenitori e delle opzioni usate nell'esempio ho inserito:
!=|opzione1|hide|contenitore1
=|opzione1|show|contenitore1
!=|opzione2|hide|contenitore2
=|opzione2|hide|contenitore2
!=|opzione3|hide|contenitore3
=|opzione3|hide|contenitore3
dove "!=" sta per diverso e "=" sta per uguale.
Quindi volendo analizzare le prime 2 impostazioni,
quando la voce OPZIONE1 è DIVERSA da OPZIONE1 il campo CONTENITORE1 sarà HIDE (nascosto),
quando la voce OPZIONE1 è UGUALE a OPZIONE1 il campo CONTENITORE1 sarà SHOW (visibile).
Evito di spiegare le altre 4 istruzioni in quanto superfluo.
{phocadownload view=file|id=11|target=s}
Prova il form appena realizzato con chronoforms V5
{chronoforms5}mostra_nascondi_campo_custom{/chronoforms5}