Supporto volontario e collaborativo per Joomla!® in italiano

Form e campi dropdown dinamici con Chronforms e ajax

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

vales 1Uno dei più problemi che spesso troviamo nella creazione di un form è la creazione di campi dropdown dinamici in cui i valori di un campo dipendono dalla scelta compiuta in precedenti campi dropdown. Ad esempio i classici campi regione, provincia e comune, i cui dopo la scelta della Regione nel campo regione, nel campo provincia si visualizzano solo le Province della regione e poi nel campo comune i solo Comuni della Provincia selezionata nel campo provincia.

In questa guida vedremo come creare con Chronoforms v5, partendo dall'esempio regioni-province-comuni, i legami fra i campi dropdown per ottenere l'effetto desiderato attingendo i valori di regioni, province e comuni da tabelle del database presenti nel sito. In questo caso l campi collegati sono tre, ma il metodo utilizzato potrà essere esteso per un numero illimitato di campi dropdown. Questo grazie alle potenzialità del componente che in questo caso utilizzerà profiquamente le risorse di ajax.

 

Preliminarmente dovremo procuraci delle tabelle di database contenenti i valori di regioni, province e comuni. Una veloce ricerca sul web ci fornisce varie tabelle utilizzabili. Da preferire tabelle in formato sql, che saranno facilmente trasferibili con phpmyadmin nel nostro database. Presteremo attenzione ai tracciati record delle tabelle che dovranno contenere i campi idonei a mettere in relazione fra di loro le tabelle. Vediamo più specificamente questa caratteristica nella struttura delle tabelle mostrata nell'immagine seguente.

vales struttura

La tabella regioni, oltre al nome della regione, deve avere la chiave primaria idregione ripetuta nella tabella province, con lo stesso nome od altro nome, in questo caso per comodità è ripetuto lo stesso nome. La tabella province avrà, oltre agli altri campi, la chiave primaria idprovincia ripetuta nella tabella comuni, anche qui con le stesse modalità dette sopra. La terza tabella dei comuni essendo l'ultima non necessita di altre particolarità oltrenotare la presenza della propria chiave primaria idcomune. Da notare subito che se avessimo necessità di mettere in relazione altre tabelle, il metodo di lavoro è sempre ripetere nella tabella successiva la chiave primaria della tabella precedente. In questo modo avremo la possibilità di legare fra loro, come già detto, un numero indefinito di campi dropdown del nostro form.

Iniziamo quindi il lavoro della creazione del form. Entriamo dal backend di joomla nel componente Chronoforms5 e creiamo un nuovo form. Nel campo Form name possiamo inserire il nome regioni_province_comuni e spuntiamo la casella di pubblicazione. Se vogliamo possiamo subito salvare in form senza chiuderlo.
Entriamo in Designer ed trasciniamo tre campi dropdown ed un campo submit nel quadro di lavoro. Clicchiamo su edit del primo campo ed assegnamo nei campi Field name e Field ID lo stesso nome regione in Label inseriamo invece Regione. Analogamente assegnamo i valori ai campi Field name e Field ID, il nome provincia nella seconda dropodown e nome comune nella terza dropdown, adeguando anche i campi Label. Salviamo senza chiudere.

La situazione dovrebbe essere come nella seguente immagine.

 vales designer

Entriamo ora in Setup del form e trascianimo nell'area On load le seguenti azioni. Da Data Management un'action DB Read e da Basic la classica action HTML (Render Form) che mostra i campi del form.

Ora predisponiamo il form alla lettura dei dati provenienti dalla tabella regioni. Clicchiamo su Edit di DB read ed iniziamo a definire i campi necessari a questa finalità.

In Action label possiamo inserire un promemoria di cosa fa l'action ed in questo caso possiamo mettere Legge tabella regioni.

In Enabled abilitiamo con Yes.

In Table name andremo a cercare nella tendina la tabella regioni del nostro database.

In Multiread metteremo Yes perchè dovranno essere letti e mostrati tutti i record della tabella regioni.

In Model ID inseriremo regioni, e vedremo dopo come riutilizzare questo valore che rappresenterà il riferimento ai valori letti dalla tabella regioni del nostro database.

In Fields inseriamo idregione e nomeregione separati da virgola, e ciò significa che saranno questi i campi letti per ogni record della tabella regioni.

La situazione ora dovrebbe essere simile a questa.

vales dbread

Se tutto è ok, non servono altri interventi su DB Read e si può cliccare su Save and Close del popup per confermare il lavoro e poi su Salva per salvare il form.

Iniziamo ora la configurazione dei campi dropdown. In Designer clicchiamo su Edit del campo regione quindi su Dynamic Data. Qui definiamo dove saranno presi i campi che popoleranno la dropdown.

In Enabled settiamo Yes.

In Data Path inseriamo regione, che è il riferimento che sopra abbiamo predisposto in Model ID, per puntare ai dati della tabella regione.

In Value key inseriamo il campo idregione chiave primaria della tabella. Questo sarà il valore inviato quando confermeremo il form cliccando su Submit.

In Text key inseriamo il campo nomeregione. Questi saranno i nomi delle regioni mostrati nella tendina della dropdown.

 Il popup mostrerà i seguenti valori

vales dynamic

 Clicchiamo su Save and Close del popup e poi su Save del Form per salvare il lavoro.

Riapriamo con Edit il campo regione e passiamo alla tab Events, qui configuriamo come segue:

In On selezioniamo != (non uguale).

in Value selected non mettiamo nulla. Vuol dire il confronto avverrà su un valore nullo e quindi quando selezioneremo qualsiano cosa che avrà un valore (nomeregione) si attiverà l'evento.

In Action scegliamo Set Dynamic Options, cioè definiamo cosa farà l'evento attivato e nel nostro caso definirà le options di un'altra dropdown dinamicamente.

In Element ID/fn/Event inseriamo provincia, cioè stabiliamo che applichiamo l'evento alla dropdown nella quale avevamo definito Field ID proprio con provincia.

In Options list/AJAX event inseriamo il valore carica, vedremo dopo dove lo useremo.

vales event

Se tutto corrisponde come sopra clicchiamo al solito su Save and Close e su Save per salvare il lavoro.

Apriamo ora in Designer con Edit il campo provincia e passiamo alla tab Events, qui analogamente al campo precedente valgono le stesse considerazione e configuriamo come segue:

In On selezioniamo != (non uguale).

in Value selected non mettiamo nulla.

In Action scegliamo Set Dynamic Options.

In Element ID/fn/Event inseriamo comune. Cioè stabiliamo che applichiamo l'evento alla dropdown nella quale avevamo definito Field ID proprio con comune.

In Options list/AJAX event per ora inseriamo il valore caricacomuni, vedremo di seguito dove lo useremo.

vales event2

Completiamo ora gli strumenti nell'area Setup del form.
In basso a sinistra  della finestra Setup clicchiamo sul tasto verde Add new event. Si aprirà un finestra in cui e previsto di inserire il nome di un evento. Inseriamo il nome carica e confermiamo l'inserimento premendo sul tasto verde. Ripetiamo di nuovo l'operazione e questa volta inseriamo il nome caricacomuni e confermiamo.

vales add event

Nell'area Setup ora avremo questa situazione, sotto l'area On submit saranno presenti due nuove aree On carica e On caricacomuni.

Da notare che abbiamo definito i nomi di queste due aree usando lo stesso nome che avevamo usato in fase di configurazione dei parametri Options list/AJAX event, poco sopra quando abbiamo configurato le Tab Events delle dropdown Provincia e Comune. Questo passaggio è fondamentale per far funzionare correttamente il collegamento fra le dropdown.

Proseguiamo e sulla sinistra apriamo l'actions in Data management e trasciniamo un'action DB Read in On carica. Apriamo ora le actions Basic e trasciniamo un'action Custom Code in On carica.

Analogamente procediamo trasferendo uguali actions nell'area On caricacomuni.

La situazione nell'area Setup sotto On submit sarà simile alla seguente.vales nuovearee

Configuriamo le action inserite nell'area On carica iniziando dalla DB Read. Clicchiamo su Edit :

In Action Label descriviamo l'attività dell'azione e inseriamo es: Legge tabella province.

In Enabled Yes

In Table name selezioniamo la tabella che contiene le province

In Multi read Yes

In Enabled model ID Yes

In Model ID inseriamo province

In Fields inseriamo i campi che desideriamo estrarre dalla tabella: idprovincia,nomeprovincia,idregione nel mio caso. Ma sono sufficienti i primi due.

In Conditions inseriamo il codice PHP seguente, che consente di filtrare  le province corrispondenti al codice regione selezionato nella prima dropdown.
Cioè il campo idregione della tabella con model province dovrà essere uguale al valore del campo regione selezionato del form. Da segnalare l'uso della notazione $form->data['nome_campo_form'] che permette di recuperare i valori dei campi del form in ambiente PHP.

<?php
return array('province.idregione' => $form->data["regione"]);
?>

Clicchiamo ora su Save and Close  e poi su Save per mettere al sicuro il lavoro.

Apriamo ora con Edit l'action Custom Code.

In Action label definiamo per momeria l'attività es: Definisce province 2^ dropodown.

In Content inseriamo invece il seguente codice PHP che permette di passare a Chronoforms i dati delle province appartenenti alla regione selezionata nella prima dropdown. Tali dati saranno utilizzati dalle routine in linguaggio AJAX contenute in Chronoforms, senza necessità da parte nostra di scrivere altro codice.

<?php
$results = array();
$results[] = 'Seleziona provincia';
foreach ( $form->data['province'] as $v ) {
  $results[$v['idprovincia']]=$v['nomeprovincia'];
}
echo json_encode($results);
?>

In questo caso $form->data['province'], in coerenza con il model province che avevamo definito in DB Read, rappresenta in PHP l'array dei valori che definiscono le province  appartenenti alla regione selezionata .

Clicchiamo ora su Save and Close  e poi su Save per mettere al sicuro il lavoro.

Analogamente configuriamo ora  le action inserite nell'area On caricacomuni iniziando dalla DB Read. Clicchiamo su Edit :

In Action Label descriviamo l'attività dell'azione e inseriamo es: Legge tabella comuni.

In Enabled Yes

In Table name selezioniamo la tabella che contiene i comuni

In Multi read Yes

In Enabled model ID Yes

In Model ID inseriamo comuni

In Fields inseriamo i campi che desideriamo estrarre dalla tabella: idcomune,nome,idprovincia nel mio caso. Ma sono suffcienti i primi due.

In Conditions inseriamo il codice PHP seguente, che consente di filtrare  i comuni corrispondenti al codice provincia selezionato nella seconda dropdown.
Cioè il campo idprovincia della tabella con model comuni dovrà essere uguale al valore del campo provincia selezionato del form. Da segnalare l'uso della notazione $form->data['nome_campo_form'] che permette di recuperare i valori dei campi del form in ambiente PHP.

<?php
return array('comuni.idprovincia' => $form->data["provincia"]);
?>

 Clicchiamo ora su Save and Close  e poi su Save per mettere al sicuro il lavoro.

Apriamo ora con Edit l'action Custom Code.

In Action label definiamo per memoria l'attività es: Definisce comuni 3^ dropodown.

In Content inseriamo invece il seguente codice PHP che permette di passare a Chronoforms i dati dei comuni appartenenti alla provincia selezionata nella seconda dropdown. Tali dati saranno utilizzati dalle routine in linguaggio AJAX contenute in Chronoforms, senza necessità da parte nostra di scrivere altro codice.

<?php
$results1 = array();
$results1[] = 'Seleziona comune';
foreach ( $form->data['comuni'] as $v ) {
  $results1[$v['idcomune']]=$v['nome'];
}
echo json_encode($results1);
?>

In questo caso $form->data['comuni'], in coerenza con il model comuni che avevamo definito in DB Read, rappresenta in PHP l'array dei valori che definiscono i comuni appartenenti alla provincia selezionata.

Clicchiamo ora su Save and Close  e poi su Save and Close per mettere al sicuro il lavoro e tornare alla lista dei form.

Cliccando sul link View Form sulla riga del nostro form accederemo al form nel frontend di Joomla e qui, se tutto è andato bene, selezionando la Regione e la Provincia vedremo l'elenco dei comuni appartenenti alla Provincia come nell'immagine seguente.

vales form

Il lavoro che abbiamo fatto può essere applicato con lo stesso metodo ad altre possibili situazioni in cui necessitano caselle dropdown in relazione fra loro, e in caso di necessità può essere esteso ad un numero di dropdown superiore a tre. E' sufficiente concatenare il vari parametri come nell'esempio utilizzato.

Ricordo che la base di partenza saranno sempre tabelle di database, in cui il metodo di lavoro è sempre ripetere nella tabella successiva la chiave primaria della tabella precedente. In questo modo avremo la possibilità di legare fra loro, come già detto, un numero indefinito di campi dropdown del nostro form.

Questo esempio dimostra ancora una volta la potenza del componente Chronoforms v5, che grazie alle numerose funzionalità inserite nel codice, e disponibili in fase di configurazione dei form permette di raggiungere importanti risultati, come abbiamo visto, con l'uso di pochissime righe di codice di programmazione PHP.


CommentaCommenta questo articolo sul forum


Ultima versione di Joomla!®

downloadVer. 3.5.1 Stabile Italiana
Data di rilascio: 05 Aprile 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: