Autore Topic: [RISOLTO] Chronoforms - drop down nidificati (Letto 10665 volte)

darinic · « **il:** 21 Ago 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
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

darinic · « **Risposta #1 il:** 21 Ago 2010, 16:35:00 »

Per completezza il codice che ho inserito e che era stato precedentemente postato da vales è il seguente:

Codice: [Seleziona]

<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>

vales · « **Risposta #2 il:** 21 Ago 2010, 18:59:06 »

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.

darinic · « **Risposta #3 il:** 21 Ago 2010, 19:20:15 »

Ciao Vales, grazie per la tua consueta disponibilità. Attualmente il codice HTML del mio form è il seguente:

Codice: [Seleziona]

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">"Modulo ordinazione o richiesta informazioni"</h1>
  </div>
  <div class="cfclear">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Invia" name="button_12" type="submit" />
  </div>
  <div class="cfclear">&nbsp;</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

darinic · « **Risposta #4 il:** 21 Ago 2010, 21:41:10 »

Ho fatto qualche tentativo ma nulla. Questi sono i codici HTML e javascript adattati al mio form:

Codice: [Seleziona]

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">"Modulo ordinazione o richiesta informazioni"</h1>
  </div>
  <div class="cfclear">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Invia" name="button_12" type="submit" />
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

Codice: [Seleziona]

<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?

vales · « **Risposta #5 il:** 21 Ago 2010, 22:12:33 »

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

Codice: [Seleziona]

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">"Modulo ordinazione o richiesta informazioni"</h1>
  </div>
  <div class="cfclear">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Invia" name="button_12" type="submit" />
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

javascript

Codice: [Seleziona]

<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>

darinic · « **Risposta #6 il:** 21 Ago 2010, 23:16:20 »

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

darinic · « **Risposta #7 il:** 21 Ago 2010, 23:47:45 »

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...

vales · « **Risposta #8 il:** 21 Ago 2010, 23:58:22 »

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.

Codice: [Seleziona]

//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);

}

darinic · « **Risposta #9 il:** 22 Ago 2010, 00:11:49 »

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

Codice: [Seleziona]

<script type='text/javascript'> all'inizio
e

Codice: [Seleziona]

</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

vales · « **Risposta #10 il:** 22 Ago 2010, 01:16:49 »

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.

Mogikino · « **Risposta #11 il:** 22 Set 2011, 12:45:34 »

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?

vales · « **Risposta #12 il:** 22 Set 2011, 19:37:13 »

Dovresti far vedere il tuo codice per verificare le differenze. Ormai quello postato sopra è abbastanza collaudato.

Mogikino · « **Risposta #13 il:** 22 Set 2011, 21:18:55 »

Ciao Vales grazie per la risposta,
inserisco qui il mio codice.

Html:

Codice: [Seleziona]

 <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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>

Javascript:

Codice: [Seleziona]

 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.

vales · « **Risposta #14 il:** 23 Set 2011, 05:18:18 »

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

Codice: [Seleziona]

 <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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>

Codice Form Javascript

Codice: [Seleziona]

 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);
}

Mogikino · « **Risposta #15 il:** 23 Set 2011, 07:50:53 »

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.

vales · « **Risposta #16 il:** 23 Set 2011, 15:47:58 »

Prova a guardare questo post la soluzione dovrebbe essere molto simile.

http://forum.joomla.it/index.php/topic,137855.msg610935.html#msg610935

Mogikino · « **Risposta #17 il:** 26 Set 2011, 09:50:27 »

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.

Mogikino · « **Risposta #18 il:** 28 Set 2011, 09:24:20 »

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

vales · « **Risposta #19 il:** 28 Set 2011, 16:13:40 »

Al posto di 1,2,... ecc nel javascript dovresti inserire i valori che ritieni più opportuno salvare nella tabella.

Mogikino · « **Risposta #20 il:** 28 Set 2011, 18:12:18 »

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?

Mogikino · « **Risposta #21 il:** 03 Ott 2011, 16:45:03 »

Nessuna sa come potrei fare?

vales · « **Risposta #22 il:** 03 Ott 2011, 18:48:52 »

Con delle funzioni javascript simili a quelle già utilizzate dovresti ottenere il risultato.

Mogikino · « **Risposta #23 il:** 03 Ott 2011, 18:56:12 »

anche l'ultima volta mi hai salvato tu Vales e mi hai modificato questo codice:

Codice: [Seleziona]

 
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

Grazieeee.