Guide e tutorial pratici per joomla e le sue estensioni
Guide e tutorial pratici per joomla e le sue estensioni

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.

Prova il form appena realizzato con chronoforms V5

messaggio 1
messaggio 2
messaggio 3
messaggio 4

Powered by ChronoForms - ChronoEngine.com

Commenti   

0 # adriano 2016-05-09 01:21
come si puo fare per inserire, per esempio =¦optione 4¦show¦contenitore 1 e 2?
0 # giusebos 2016-05-09 10:55
non puoi, al massimo devi inserire in un contenitore altri 2 contenitori

Per pubblicare un commento devi registrarti