Ciao a tutti!
Ho un probema con il componente chronoform.
Dovrei inserire due dropdown collegate, cioè quando un utente sceglie un'opzione dalla prima dropdown, i valori presenti nella seconda cambiano in base alla scelta precedente.
Utilizzo joomla 2.5.18 e chronoform 4.0.1, il form di test lo potete trovare a questo indirizzo:
http://2014.digitalfestival.net/testHo provato a copiare il codice di questa discussione
http://forum.joomla.it/index.php/topic,111315.0.html e di quest'altra
http://forum.joomla.it/index.php/topic,95733.0.html ma non riesco a venirne a capo.
Il codici che ho ora sono:
codice html
<div class="form_item">
<div class="form_element cf_heading">
<h1 class="cf_text">"Modulo ordinazione o richiesta informazioni"</h1>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Nome</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_2" name="Nome" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">E-mail</label>
<input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="text_3" name="mail_utente" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Telefono</label>
<input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="text_4" name="Telefono" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Seleziona la categoria di interesse</label>
<select class="cf_inputbox" id="select_7" size="1" title="" name="select_7" onfocus="fillCategory();" onchange="SelectSubCat();" >
<option value="">Choose Option</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Seleziona l'articolo di interesse</label>
<select class="cf_inputbox" id="select_8" size="1" title="" name="select_8">
<option value="">Choose Option</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 150px;">Scrivi il messaggio</label>
<textarea class="cf_inputbox required" rows="3" id="text_10" title="" cols="30" name="messaggio"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_captcha">
<label class="cf_label" style="width: 150px;">Inserisci i caratteri visualizzati</label>
<span>{imageverification}</span>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Invia" name="button_12" type="submit" />
</div>
<div class="cfclear"> </div>
</div>
Mentre il codice js è
//questo è il codice da inserire nella TAB Form Code sezione javascript
function fillCategory(){
removeAllOptions(document.getElementById('ChronoContact_Modulo_Informazioni').select_7);
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_7, '1', 'Quadri');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_7, '2', 'Centritavola');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_7, '3', 'Cuscini');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_7, '4', 'Biancheria da Bagno');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_7, '5', 'Biancheria da Cucina');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_7, '6', 'Oggettistica varia per la casa');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_7, '7', 'Decorazioni natalizie');
}
function SelectSubCat(){
// Funzione chiamata dopo la selezione della Sezione - ON or after selection of category this function will work
removeAllOptions(document.getElementById('ChronoContact_Modulo_Informazioni').select_8);
//addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8, "", "Seleziona", "");
// Raccoglie tutti gli elementi della categoria per id - Collect all element of subcategory for various id
if (document.getElementById('ChronoContact_Modulo_Informazioni').select_7.value == '1'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'1', 'Agrumi di Sicilia');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'2', 'Scalinata di Taormina');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').select_7.value == '2'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'3', 'Centrino Mimosa');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'4', 'Centrino Caltagirone');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').select_7.value == '3'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'5', 'Cuscino1');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'6', 'Cuscino2');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').select_7.value == '4'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'7', 'Trittico di Tulipani');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'8', 'Asciugamano e ospite Margherite');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').select_7.value == '5'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'9', 'Strofinacci Fantasia');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'10', 'Salvamacchia');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').select_7.value == '6'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'11', 'Farfallina variopinta');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'12', 'Piatto Girasole');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').select_7.value == '7'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'13', 'Abbraccio degli angeli');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').select_8,'14', 'Cuscino Bianco Natale');
}
}
//////////////////
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);
}
Il form si chiama Modulo_Informazioni, ho provato anche a chiamarlo ChronoContact_Modulo_Informazioni ma nulla da fare...
Forse sbaglio dove metto il codice?
- ho creato un nuovo form tramite Form Wizard
- negli events ho messo:
custom code: con il codice html (a dir la verità il codice html ho provato anche a metterlo direttamente nel form aprendolo nel form manager... ma anche qui non funziona)
load js: con il codice js
Grazie a tutti!
