Buonasera a tutti,
sto cercando di far funzionare il codice di Vales e di avere dunque una select "categoria" dinamica, a seconda della "sezone" scelta.
Ho copiato paro paro il codice di Vales, sia il javascript che l'HTML, limitandomi solo a cambiare il nome del form (prova).
Se lavoro in Joomla 2.5, con Chronoforms 4.0, non c'è modo di far apparire alcuna opzione nei menù a tendina.
Se però lavoro fuori da Joomla, creando un file JS ed uno HTML ed aggiungendo in quest'ultimo il TAG <form id="prova"></form>, le select si popolano con i valori scelti da Vales.
Leggevo in un precedete post di "dla86" (20 settembre 2012 ore 10:00:53), che con la nuova versione di Chrono, l'id del form doveva essere richiamato con chronoform (tutto attaccato e tutto minuscolo) e non più come indicato da Vales con ChronoContact; ho provato questa soluzione ma non funziona ugualmente.
A seguire posto il codice, nella speranza che qualcuno di voi possa darmi una mano ad uscirne, poichè sto diventando pazzo.
Javascript:
//questo è il codice da inserire nella TAB Form Code sezione javascript
function fillCategory(){
removeAllOptions(document.getElementById('ChronoContact_prova').sezione);
addOption(document.getElementById('ChronoContact_prova').sezione, '1', 'sezione 1');
addOption(document.getElementById('ChronoContact_prova').sezione, '2', 'sezione 2');
addOption(document.getElementById('ChronoContact_prova').sezione, '3', 'sezione 3');
}
function SelectCategoria(){
// Funzione chiamata dopo la selezione della Sezione - ON or after selection of category this function will work
removeAllOptions(document.getElementById('ChronoContact_prova').categoria);
//addOption(document.getElementById('ChronoContact_prova').categoria, "", "Seleziona", "");
// Raccoglie tutti gli elementi della categoria per id - Collect all element of subcategory for various id
if (document.getElementById('ChronoContact_prova').sezione.value == '1'){
addOption(document.getElementById('ChronoContact_prova').categoria,'1', 'categoria 1 sez 1');
addOption(document.getElementById('ChronoContact_prova').categoria,'2', 'categoria 2 sez 1');
addOption(document.getElementById('ChronoContact_prova').categoria,'6', 'categoria 3 sez 1');
addOption(document.getElementById('ChronoContact_prova').categoria,'7', 'categoria 4 sez 1');
}
if (document.getElementById('ChronoContact_prova').sezione.value == '2'){
addOption(document.getElementById('ChronoContact_prova').categoria,'3', 'categoria 1 sez 2');
addOption(document.getElementById('ChronoContact_prova').categoria,'4', 'categoria 2 sez 2');
addOption(document.getElementById('ChronoContact_prova').categoria,'5', 'categoria 3 sez 2');
}
if (document.getElementById('ChronoContact_prova').sezione.value == '3'){
addOption(document.getElementById('ChronoContact_prova').categoria,'9', 'categoria 1 sez 3');
addOption(document.getElementById('ChronoContact_prova').categoria,'10', 'categoria 2 sez 3');
}
}
//////////////////
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=1;i--)
{
selectbox.options[i]=null;
//selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("option");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
//selectbox.appendChild(optn,where);
}
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=1;i--)
{
selectbox.options[i]=null;
//selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("option");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
//selectbox.appendChild(optn,where);
}
HTML
<div class="ccms_form_element cfdiv_select" id="sezione1_container_div" style=""><label>Sezione</label>
<select id="id_sezione" name="sezione" onfocus="fillCategory();" onChange="SelectCategoria();" class="cf_inputbox validate-selection">
<Option value="">Seleziona</option>
</select>
<div class="clear"></div><div id="error-message-sezione"></div></div><div class="ccms_form_element cfdiv_select" id="categoria1_container_div" style=""><label>Categoria</label>
<select id="id_categoria" name="categoria" class="cf_inputbox validate-selection">
<Option value="">Seleziona</option>
</select>
<div class="clear"></div><div id="error-message-categoria"></div></div><div class="ccms_form_element cfdiv_submit" id="input_submit_31_container_div" style="text-align:left">
<input value="Invia" name="button_1" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_3"></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style="">
<div class="clear"></div><div id="error-message-empty"></div></div>
Grazie anticipatamente a tutti coloro che vorranno collaborare.
Saluti,
Marco
