Joomla.it Forum
Componenti per Joomla! => Gestione Form => : darinic 21 Aug 2010, 16:10:15
-
Ciao. Sul mio form ho un menù a discesa (drop down). Vorrei che la selezione da parte dell'utente di un'opzione piuttosto che di un'altra su questo drop down determini un drop down successivo con opzioni differenti. Mi spiego meglio: aprendo il primo drop down l'utente si troverà a disposizione tre opzioni: "Opzione 1" "Opzione 2" "Opzione 3". Se sceglie "Opzione 1" nel menù a tendina successivo si dovranno caricare "Opzione 1_1" "Opzione 1_2" "Opzione 1_3", se invece sceglie l'Opzione 2 allora nel menù a tendina successivo si dovranno caricare tre opzioni diverse "Opzione 2_1" "Opzione 2_2" "Opzione 2_3"
Cercando sul forum ho trovando la soluzione qui: http://forum.joomla.it/index.php/topic,95733.0.html (http://forum.joomla.it/index.php/topic,95733.0.html)
Ho quindi copiato il codice, come indicato da vales, in Form Code --> Form JavaScript, ma nulla... non è cambiato nulla. C'è qualche altro passo propedeutico che devo fare prima? Non sono un programmatore. Nl mio form il primo drop down è creato e non ho inserito alcuna opzione in quanto ho pensato lo facesse lo script. Tuttavia sembra non funzionare.
Quali sono i passi da seguire per far funzionare lo script?
Grazie mille
-
Per completezza il codice che ho inserito e che era stato precedentemente postato da vales è il seguente:
<script type='text/javascript'>
//<![CDATA[
//questo è il codice da inserire nella TAB Form Code sezione javascript
function fillCategory(){
removeAllOptions(document.getElementById('ChronoContact_atto_10').cod_sezione);
addOption(document.getElementById('ChronoContact_atto_10').cod_sezione, '1', 'sezione 1');
addOption(document.getElementById('ChronoContact_atto_10').cod_sezione, '2', 'sezione 2');
addOption(document.getElementById('ChronoContact_atto_10').cod_sezione, '3', 'sezione 3');
}
function SelectSubCat(){
// Funzione chiamata dopo la selezione della Sezione - ON or after selection of category this function will work
removeAllOptions(document.getElementById('ChronoContact_atto_10').cod_categoria);
//addOption(document.getElementById('ChronoContact_atto_10').cod_categoria, "", "Seleziona", "");
// Raccoglie tutti gli elementi della categoria per id - Collect all element of subcategory for various id
if (document.getElementById('ChronoContact_atto_10').cod_sezione.value == '1'){
addOption(document.getElementById('ChronoContact_atto_10').cod_categoria,'1', 'categoria 1 sez 1');
addOption(document.getElementById('ChronoContact_atto_10').cod_categoria,'2', 'categoria 2 sez 1');
addOption(document.getElementById('ChronoContact_atto_10').cod_categoria,'6', 'categoria 3 sez 1');
addOption(document.getElementById('ChronoContact_atto_10').cod_categoria,'7', 'categoria 4 sez 1');
}
if (document.getElementById('ChronoContact_atto_10').cod_sezione.value == '2'){
addOption(document.getElementById('ChronoContact_atto_10').cod_categoria,'3', 'categoria 1 sez 2');
addOption(document.getElementById('ChronoContact_atto_10').cod_categoria,'4', 'categoria 2 sez 2');
addOption(document.getElementById('ChronoContact_atto_10').cod_categoria,'5', 'categoria 3 sez 2');
}
if (document.getElementById('ChronoContact_atto_10').cod_sezione.value == '3'){
addOption(document.getElementById('ChronoContact_atto_10').cod_categoria,'9', 'categoria 1 sez 3');
addOption(document.getElementById('ChronoContact_atto_10').cod_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);
}//]]>
</script>
-
Devi predisporre anche il codice in Form HTML per sincronizzarsi con il javascript, facendo quindi riferiemento al nome del tuo form e dei tuoi campi.
Quello che hai postato fa riferiemento ad un mio form che si chiama atto_10, quindi devi adeguarlo al tuo form.
-
Ciao Vales, grazie per la tua consueta disponibilità. Attualmente il codice HTML del mio form è il seguente:
<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 l'articolo di interesse</label>
<select class="cf_inputbox" id="select_7" size="1" title="" name="select_7">
<option value="">Choose Option</option>
<option value="Quadri">Quadri</option>
<option value="Centrini">Centrini</option>
<option value="Tovaglie">Tovaglie</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>
dove nel div "form_element cf_dropdown" è presente il dettaglio del primo drop down. Al momento sul codice java che hai postato ho sostituito "atto_10" con "Modulo_Informazioni" che è il nome del mio form. Quali sono adesso i passi successivi da fare?
Devo comunque creare, tramite il wizard magari, anche il secondo drop down, ovvero quello che presenterà opzioni diverse a seconda della selezione dell'utente nel primo dropdown? e poi inserire queste opzioni nel form java script?
Mi indicheresti i passi da seguire sulla base del codice HTML del mio attuale form?
GRazie mille
-
Ho fatto qualche tentativo ma nulla. Questi sono i codici HTML e javascript adattati al mio form:
<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">
<option value="">Choose Option</option>
<option value="Quadri">Quadri</option>
<option value="Centritavola">Centritavola</option>
<option value="Cuscini">Cuscini</option>
<option value="Biancheria da Bagno">Biancheria da Bagno</option>
<option value="Biancheria da Cucina">Biancheria da Cucina</option>
<option value="Oggettistica varia per la casa">Oggettistica varia per la casa</option>
<option value="Decorazioni natalizie">Decorazioni natalizie</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>
<option value="Agrumi di Sicilia">Agrumi di Sicilia</option>
<option value="Scalinata di Taormina">Scalinata di Taormina</option>
<option value="Centrino Mimosa">Centrino Mimosa</option>
<option value="Centrino Caltagirone">Centrino Caltagirone</option>
<option value="Cuscino1">Cuscino1</option>
<option value="Cuscino2">Cuscino2</option>
<option value="Trittico di Tulipani">Trittico di Tulipani</option>
<option value="Asciugamano e ospite Margherite">Asciugamano e ospite Margherite</option>
<option value="Strofinacci Fantasia">Strofinacci Fantasia</option>
<option value="Salvamacchia">Salvamacchia</option>
<option value="Farfallina variopinta">Farfallina variopinta</option>
<option value="Piatto Girasole">Piatto Girasole</option>
<option value="Abbraccio degli angeli">Abbraccio degli angeli</option>
<option value="Cuscino Bianco Natale">Cuscino Bianco Natale</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>
<script type='text/javascript'>
//<![CDATA[
//questo è il codice da inserire nella TAB Form Code sezione javascript
function fillCategory(){
removeAllOptions(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione);
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione, '1', 'Quadri');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione, '2', 'Centritavola');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione, '3', 'Cuscini');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione, '4', 'Biancheria da Bagno');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione, '5', 'Biancheria da Cucina');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione, '6', 'Oggettistica varia per la casa');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione, '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').cod_categoria);
//addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria, "", "Seleziona", "");
// Raccoglie tutti gli elementi della categoria per id - Collect all element of subcategory for various id
if (document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione.value == '1'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'1', 'Agrumi di Sicilia');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'2', 'Scalinata di Taormina');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione.value == '2'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'3', 'Centrino Mimosa');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'4', 'Centrino Caltagirone');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione.value == '3'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'5', 'Cuscino1');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'6', 'Cuscino2');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione.value == '4'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'7', 'Trittico di Tulipani');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'8', 'Asciugamano e ospite Margherite');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione.value == '5'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'9', 'Strofinacci Fantasia');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'10', 'Salvamacchia');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione.value == '6'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'11', 'Farfallina variopinta');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'12', 'Piatto Girasole');
}
if (document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione.value == '7'){
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'13', 'Abbraccio degli angeli');
addOption(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria,'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);
}//]]>
</script>
forse è un problema delle funzioni removeAllOptions(document.getElementById('ChronoContact_Modulo_Informazioni').cod_sezione);
e
removeAllOptions(document.getElementById('ChronoContact_Modulo_Informazioni').cod_categoria);
che dovrebbero essere definite in modo diverso?
-
Mancavano le chiamate alle funzioni javascript ed i nomi di campo del tuo form e c'erano in più le options, quelle le scrive il javascript (la prima si potrebbe anche mantenere togliendo l'analogo codice in javascript, cioè la funzione fillCategory e la sua chiamata dalla select, ma ormai ho lasciato tutto )
prova questi:
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>
javascript
<script type='text/javascript'>
//<![CDATA[
//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);
}//]]>
</script>
-
Ho provato..niente. Rispetto a prima in cui apparivano tutte le opzioni sui due drop down, adesso invece su entrambi appare solo "Choose Option" Non appaiono le opzioni
-
Non ci capisco molto di HTML e java. Tuttavia rileggendo il codice che mi ha i postato mi sembra che logicamente tutto fili. Quale potrebbe essere il problema?
Sto facendo delle prove, spero di venirne a capo... :-[
-
Ora funziona, avevo lasciato le prime due e le ultime due righe che non vanno usate qui.
Ma mancava anche la chiusura della 2^ funzione.
Ora il javascript funziona.
//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);
}
-
Grande Vales :), adesso funziona. Mi hai risolto un grosso problema...
In pratica, a parte l'assenza dell'ultima parentesi graffa a chiudere la funzione SelectSubcat(), il problema stava in <script type='text/javascript'> all'inizio
e
</script>alla fine
Come mai in questa situazione non vanno usati?
Cosa comportavano queste due righe di codice aggiuntivo?
Adesso mi studio per benino quello che mi hai inviato così da farmi trovare pronto la prossima volta.
Grazie ancora
-
Non vanno usati perchè gli inserisce automaticamente chronoforms, ed inserendoli usciva un codice non eseguibile. C'è anche scritto all'inizio delle finestre dei campi del form.
-
Ciao ragazzi sto provando anche io a far funzionare i Dropdown ma anche usando questo codice ri adattato al mio form quindi cambiando il nome form e i nomi dei campi non mi funziona, mi potete dare una mano?
-
Dovresti far vedere il tuo codice per verificare le differenze. Ormai quello postato sopra è abbastanza collaudato.
-
Ciao Vales grazie per la risposta,
inserisco qui il mio codice.
Html:
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Cognome</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_0" name="cognome" 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;">Nome</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_1" name="nome" 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 marca</label>
<select class="cf_inputbox" id="select_10" size="1" title="" name="select_7" onfocus="fillCategory();" onchange="SelectSubCat();" >
<option value="">Seleziona</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 il modello</label>
<select class="cf_inputbox" id="select_11" size="1" title="" name="select_8">
<option value="">Seleziona</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;">Privacy</label>
<textarea class="cf_inputbox" rows="20" id="text_9" title="" cols="80" name="privacy"></textarea>
</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 Cliente</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_8" name="mail" type="text" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA1</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_4" name="file_1" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA2</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_4" name="file_2" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA3</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_6" name="file_3" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA4</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_5" name="file_4" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA5</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_9" name="file_5" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_button">
<input value="Invia" name="button_7" type="submit" /><input type="reset" name="reset" value="Reset"/>
</div>
<div class="cfclear"> </div>
</div>
Javascript:
function fillCategory(){
removeAllOptions(document.getElementById('copia_form_attivazioni_x').select_10);
addOption(document.getElementById('copia_form_attivazioni_x').select_10, '1', 'Samsung');
addOption(document.getElementById('copia_form_attivazioni_x').select_10, '2', 'Nokia');
addOption(document.getElementById('copia_form_attivazioni_x').select_10, '3', 'Lg');
} function SelectModello(){ removeAllOptions(document.getElementById('copia_form_attivazioni_x').select_11);
//addOption(document.getElementById('copia_form_attivazioni_x').select_11, "", "Seleziona", ""); if (document.getElementById('copia_form_attivazioni_x').select_10.value =Samsung= '1'){
addOption(document.getElementById('copia_form_attivazioni_x').select_11,'1', 'GalaxyS');
}
if (document.getElementById('copia_form_attivazioni_x').select_10.value =Nokia= '2'){
addOption(document.getElementById('copia_form_attivazioni_x').select_11,'2', 'N8');
}
if (document.getElementById('copia_form_attivazioni_x').select_10.value =Lg= '3'){
addOption(document.getElementById('chronoforms_form_attivazioni_x').select_11,'3', 'Dual');
} ////////////////// 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); }
Ho provato in tutti i modi ma nulla.
-
Con questi codici funziona.
Non avevi copiato correttamente, avevi modificato il nome di una funzione, alcune righe non andavano a capo, c'erano errori nelle if di controllo della prima scelta ed il nome del form va preceduto da ChronoContact_
Codice Form HTML
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Cognome</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_0" name="cognome" 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;">Nome</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_1" name="nome" 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 marca</label>
<select class="cf_inputbox" id="select_10" size="1" title="" name="select_7" onfocus="fillCategory();" onchange="SelectModello();" >
<option value="">Seleziona</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 il modello</label>
<select class="cf_inputbox" id="select_11" size="1" title="" name="select_8">
<option value="">Seleziona</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;">Privacy</label>
<textarea class="cf_inputbox" rows="20" id="text_9" title="" cols="80" name="privacy"></textarea>
</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 Cliente</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_8" name="mail" type="text" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA1</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_4" name="file_1" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA2</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_4" name="file_2" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA3</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_6" name="file_3" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA4</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_5" name="file_4" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label" style="width: 150px;">Inserisci PDA5</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_9" name="file_5" type="file" />
</div>
<div class="cfclear"> </div>
</div> <div class="form_item">
<div class="form_element cf_button">
<input value="Invia" name="button_7" type="submit" /><input type="reset" name="reset" value="Reset"/>
</div>
<div class="cfclear"> </div>
</div>
Codice Form Javascript
function fillCategory(){
removeAllOptions(document.getElementById('ChronoContact_copia_form_attivazioni_x').select_10);
addOption(document.getElementById('ChronoContact_copia_form_attivazioni_x').select_10, '1', 'Samsung');
addOption(document.getElementById('ChronoContact_copia_form_attivazioni_x').select_10, '2', 'Nokia');
addOption(document.getElementById('ChronoContact_copia_form_attivazioni_x').select_10, '3', 'Lg');
}
function SelectModello(){
removeAllOptions(document.getElementById('ChronoContact_copia_form_attivazioni_x').select_11);
//addOption(document.getElementById('ChronoContact_copia_form_attivazioni_x').select_11, "", "Seleziona", "");
if (document.getElementById('ChronoContact_copia_form_attivazioni_x').select_10.value == '1'){
addOption(document.getElementById('ChronoContact_copia_form_attivazioni_x').select_11,'1', 'GalaxyS');
}
if (document.getElementById('ChronoContact_copia_form_attivazioni_x').select_10.value == '2'){
addOption(document.getElementById('ChronoContact_copia_form_attivazioni_x').select_11,'2', 'N8');
}
if (document.getElementById('ChronoContact_copia_form_attivazioni_x').select_10.value =='3'){
addOption(document.getElementById('ChronoContact_chronoforms_form_attivazioni_x').select_11,'3', 'Dual');
}
}
//////////////////
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);
}
-
Beh senza parole, grazie Vales :) magnifico funziona senza una pecca.
Volevo chiederti un'altra piccola cosa se piccola si può chiamare, come posso fare per stampare la pagina di conferma? Nel senso che compilo il form clicco invia mi applica la pagina di conferma e li vorrei anche un pulsante di stampa dove mi fa stampare solo il risultato dei form e non tutta la pagina del sito, sarà possibile? Dico la pagina di conferma perchè credo sia quella più semplice da stampare nel senso che in automatico mi da già il risultato del form quindi dovrei aggiungere solo la funzione stampa.
Grazie ancora Vales mi hai veramente risolto un bel problema.
-
Prova a guardare questo post la soluzione dovrebbe essere molto simile.
http://forum.joomla.it/index.php/topic,137855.msg610935.html#msg610935
-
Ora ho un problema, collegando i drop down come mi hai detto tu funziona tutto perfettamente però se vado a visualizzare la tabella che mi popola il form, nelle voci del drop down anziche darmi la voce che seleziona il cliente ossia l'imei del telefono o la marca, mi da 1, 2 , 3 ecc ecc. quindi mi fa vedere il numero della voce scelta ossia la prima o la seconda, come posso rimediare?
Io stavo pensando..non è che devo inserire un 'value=numero imei' da qualche parte?
Grazie ancora.
-
Ciao ragazzi nessuno sa come risolvere questo problema, magari è una fesseria ma io proprio non riesco a venirne fuori, è importante che la tabella del form mi dia i dati del drop down altrimenti non ha senso...
Speriamo che qualcuno mi aiuti :)
-
Al posto di 1,2,... ecc nel javascript dovresti inserire i valori che ritieni più opportuno salvare nella tabella.
-
Ok perfetto, :)
ma come posso fare per far si che i dropo down successivi al primo si popolino in automatico senza dove selezionare io le voci?
Ad esempio:
Seleziono la marca (samsung) e mi da la possibilità nel secondo dropdown si selezionare il modello (galaxys) poi seleziono galaxys e mi popola il terzo dropdown dove devo selezionare l'imei, ma non puo essere tutto automatico ossia che ad un imei viene assegnato modello e marca?
Quindi nel primo dropdown mi fa selezionare l'imei e gli altri due dropdown si dovrebbero popolare da soli senza dover io selezionare alcuna voce.
Almeno che non dovrei cambiare e inserire un campo testo che si popola prendendo i dati dalla tabella...mah..
Qualche consiglio?
-
Nessuna sa come potrei fare?
:(
-
Con delle funzioni javascript simili a quelle già utilizzate dovresti ottenere il risultato.
-
:-[ anche l'ultima volta mi hai salvato tu Vales e mi hai modificato questo codice:
function fillCategory(){
removeAllOptions(document.getElementById('ChronoContact_attivazioni_1').select_12);
addOption(document.getElementById('ChronoContact_attivazioni_1').select_12, '355555555555555',
'355555555555555');
addOption(document.getElementById('ChronoContact_attivazioni_1').select_12, '355555555555556',
'355555555555556');
addOption(document.getElementById('ChronoContact_attivazioni_1').select_12, '355555555555557',
'355555555555557');
}
function SelectModello(){
removeAllOptions(document.getElementById('ChronoContact_attivazioni_1').select_11);
//addOption(document.getElementById('ChronoContact_attivazioni_1').select_11, "", "Seleziona", "");
if (document.getElementById('ChronoContact_attivazioni_1')
.select_12.value == '355555555555555'){
addOption(document.getElementById('ChronoContact_attivazioni_1').select_11,'Samsung_GalaxyS', 'Samsung_GalaxyS');
}
if (document.getElementById('ChronoContact_attivazioni_1')
.select_12.value == '355555555555556'){
addOption(document.getElementById('ChronoContact_attivazioni_1').select_11,'Nokia_N8', 'Nokia_N8');
}
if (document.getElementById('ChronoContact_attivazioni_1')
.select_12.value =='355555555555557'){
addOption(document.getElementById('ChronoContact_attivazioni_1').select_11,'Lg_Dual', 'Lg_Dual');
}
}
//////////////////
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);
}
come lo modifico? Io e Javascript non andiamo molto d'accordo ;D
Grazieeee.