form con menù di scelta che si genera in base a risposte precedenti

[annaelle]

Ho questo problema:
devo creare una questionario dove alla domanda 1 sono proposte 13 coppie di parole.
Devo scegliere una voce per ogni coppia e, in base alla scelta di queste 13 voci, costruire un menù a discesa a scelta multipla che rappresenta la seconda domanda.
In questa seconda domanda devo scegliere 5 voci dall'elenco di 13 precedentemente.
Non chiedetemi perchè deve essere così e non è possibile scegliere subito 5 parole fra le 13 coppie: sarebbe troppo semplice...

Come accidenti faccio a costruire il secondo menù a discesa? la soluzione array no: troppe combinazioni da scrivere.

grazie

[cavicchiandrea]

Una soluzione potrebbe essere una pagina server che verifica le risposte e che genera la select successiva il tutto caricato con ajax, ma non so se è più semplice o facile di un array, comunque vada non sarà facile

[annaelle]

accidenti, io speravo in qualcosa di magico tipo jquery...

[lucavizzi]

Originariamente inviato da annaelle
Ho questo problema:
devo creare una questionario dove alla domanda 1 sono proposte 13 coppie di parole.
Devo scegliere una voce per ogni coppia e, in base alla scelta di queste 13 voci, costruire un menù a discesa a scelta multipla che rappresenta la seconda domanda.
In questa seconda domanda devo scegliere 5 voci dall'elenco di 13 precedentemente.
Non chiedetemi perchè deve essere così e non è possibile scegliere subito 5 parole fra le 13 coppie: sarebbe troppo semplice...

Come accidenti faccio a costruire il secondo menù a discesa? la soluzione array no: troppe combinazioni da scrivere.

grazie

Ciao AnnaElle,
Se ho capito bene ed il menu della domanda due deve contenere le 13 opzioni selezionate nella domanda 1, potresti fare:

<form id="selector">
<label><input type="radio" name="coppia1" value="opzione1"> Opzione1</label>
<label><input type="radio" name="coppia1" value="opzione2"> Opzione2</label>
...
<label><input type="radio" name="coppia13" value="opzione1"> Opzione1</label>
<label><input type="radio" name="coppia13" value="opzione1"> Opzione1</label>

<input type="button" value="Conferma risposte" onClick="step2()">
</form>

function step2(){
   var strHTML='<select multiple="multiple">';
   var arrElementi=document.getElementById('selector').elements;
   for(var i=0; i<arrElementi.length-1; i++){ //il -1 esclude il pulsante
      if(arrElementi[i].checked){
         strHTML+='<option value="'+arrElementi[i].value+'">'+arrElementi[i].value+'</option>';
      }
   }
   strHTML+='</select>';  
   document.getElementById('selector').innerHTML=strHTML;
}

[annaelle]

può essere una soluzione, grzie, faccio delle prove. L'unico problema è che questa non è l'unica domanda che devo porre... anzi è la seconda quandi dovrei trovare il modo di dividere su più pagine le diverse domande, sperando me lo accettino. Ora comunque provo e poi faccio sapere.

Altrimenti provo a buttarmi su ASP e vedere se trovo qualche barbatrucchetto magari buttando tutto inun DB.

grazie ancora

[lucavizzi]

Prego

Il "succo" dello script è che non devi stare a controllare domanda per domanda, puoi creare un array con tutti gli elementi del modulo
var arrElementi=document.getElementById('selector').el ements;
e scorrerlo cercando quello che ti serve, nel nostro caso i radio selezionati:
if(arrElementi[i].checked){

Ciao

[annaelle]

ho fatto delle piccole modifiche in modo da non dover mettere il pulsante:

<script language="Javascript" type="text/javascript">
<!-- 	function verifica() { 	
var controllo = false; 	
var k=0;  	
for(var i=0; i<26; i++) { 	  
if(document.selector.elements[i].checked) { 		
k=k+1;		 		
if(k>=13) { 		
controllo = true; 		
break;} 	  
} 	
} 	if(controllo) { 	
 var strHTML='<select multiple="multiple">';    
var arrElementi=document.getElementById('selector').elements;    
for(var i=0; i<arrElementi.length-1; i++){ 
//il -1 esclude il pulsante       
if(arrElementi[i].checked){          
strHTML+='<option value="'+arrElementi[i].value+'">'+arrElementi[i].value+'</option>';       
}    
}    
strHTML='</select>';      
document.getElementById('selector').innerHTML=strHTML; 	  
return true; 	
} 	  
return true; 	
} 	//--> 	
</script>

<form id="selector" name="selector">          
<table width="491" border="0" cellpadding="5" cellspacing="10">           
<tr height="25">             
<td width="186" valign="top"><input name="estetica" type="radio" onClick="verifica()" value="Invitante" /> Invitante</td>
             <td width="181" valign="top">
<input name="estetica" type="radio" onClick="verifica()" value="Poco invitante" /> Poco invitante</td>             
<td width="110" valign="top"></td>           
</tr>           <tr height="25">             
<td valign="top"><input name="nutrizione" type="radio" onClick="verifica()" value="Ricco di nutrienti" /> Ricco di nutrienti</td>             
<td valign="top"><input name="nutrizione" type="radio" onClick="verifica()" value="Povero di nutrienti" /> Povero di nutrienti</td>             
<td valign="top"></td>           </tr>           <tr height="25">             <td valign="top"><input name="salutare" type="radio" onClick="verifica()" value="Sano" /> Sano</td>             <td valign="top"><input name="salutare" type="radio" onClick="verifica()" value="Spazzatura" /> Spazzatura</td>             <td valign="top"></td>           </tr>          <tr height="25">             <td valign="top"><input name="naturalezza" type="radio" onClick="verifica()" value="Naturale" /> Naturale </td>             <td valign="top"><input name="naturalezza" type="radio" onClick="verifica()" value="Artificiale" /> Artificiale</td>             <td valign="top"></td>           </tr>          <tr height="25">             <td valign="top"><input name="provenienza" type="radio" onClick="verifica()" value="Km zero" /> Italiano</td>             <td colspan="2" valign="top"><input name="provenienza" type="radio" onClick="verifica()" value="Proveniente da tutte le parti del mondo" /> Resto del mondo</td>             </tr>           <tr height="25">             <td valign="top"><input name="varieta" type="radio" onClick="verifica()" value="Di grande varietà" /> Molto vario </td>             <td colspan="2" valign="top"><input name="varieta" type="radio" onClick="verifica()" value="Universale (una tipologia uguale per tutti)" /> Poco vario</td>             </tr>           <tr height="25">             <td valign="top"><input name="aspetto" type="radio" onClick="verifica()" value="Molto simile ad oggi" /> Simile ad oggi</td>             <td valign="top"><input name="aspetto" type="radio" onClick="verifica()" value="Nutrimento nuovo" /> Nuovo</td>             <td valign="top"></td>           </tr>           <tr height="25">             <td valign="top"><input name="socialita" type="radio" onClick="verifica()" value="Bello" /> Conviviale </td>             <td valign="top"><input name="socialita" type="radio" onClick="verifica()" value="Brutto" /> Consumato da soli</td>             <td valign="top"></td>           </tr>           <tr height="25">             <td valign="top"><input name="identita" type="radio" onClick="verifica()" value="Della tua tradizione " /> Tradizionale</td>             <td valign="top"><input name="identita" type="radio" onClick="verifica()" value="Multietnico" /> Multietnico</td>             <td valign="top"></td>           </tr>           <tr height="25">             <td valign="top"><input name="costoso" type="radio" onClick="verifica()" value="Poco costoso" /> Poco costoso</td>             <td valign="top"><input name="costoso" type="radio" onClick="verifica()" value="Molto costoso" /> Molto costoso</td>             <td valign="top"></td>           </tr>                     <tr height="25">             <td valign="top"><input name="sostenibilita" type="radio" onClick="verifica()" value="Rispettoso dell’ambiente" /> Rispettoso dell’ambiente</td>             <td colspan="2" valign="top"><input name="sostenibilita" type="radio" onClick="verifica()" value="Non rispettoso dell’ambiente" /> Non rispettoso dell’ambiente</td>             </tr>           <tr height="25">             <td valign="top"><input name="democrazia" type="radio" onClick="verifica()" value="Per tutti" /> Per tutti </td>             <td valign="top"><input name="democrazia" type="radio" onClick="verifica()" value="Per pochi" /> Per pochi </td>             <td valign="top"></td>           </tr>           <tr height="25">             <td valign="top"><input name="preparazione" type="radio" onClick="verifica()" value="Cucinato in casa" /> Cucinato in casa</td>             <td valign="top"><input name="preparazione" type="radio" onClick="verifica()" value="Già pronto" /> Già pronto</td>             <td valign="top"></td>           </tr>         </table> </form>

Però non funziona... o meglio, quando arrivo a selezionare l'ultimo radiobutton la form scompare ma non compare il menù a discesa.
Qualcuno ha un'idea di dove io sbagli?

[lucavizzi]

strHTML='</select>';
dovrebbe essere
strHTML+='</select>';

ho editato il post precedente

[annaelle]

rettifico, scovato l'inghippo, mi sono persa via un +...
quindi il coice finale che mi pare funzionare (ora lo testo un po' ben benino e vedo se apportare altre modifiche) è:

		<script language="Javascript" type="text/javascript">
	<!--
	function verifica() {
	var controllo = false;
	var k=0; 
	for(var i=1; i<27; i++) {
	  if(document.questionario.elements[i].checked) {
		k=k+1;		
		if(k>=13) {
		alert(k);
	    var strHTML='<name="top5" size="13" multiple id="top5">';		   		
		var j=13;
   		for(var i=1; i<27; i++){ 
      		if(document.questionario.elements[i].checked){
         		strHTML+='<option value="'+document.questionario.elements[i].value+'">'+document.questionario.elements[i].value+'</option>';
      		}
   		}		
   	strHTML+='</select>'; 	
	alert(strHTML);
   	document.getElementById('top5').innerHTML=strHTML;
	  return true;
	  }
	  }
	}

	}
	//-->
	</script>

e questo invece quello che va giù

<form action="" method="get" name="questionario">
                  


1. Come sarà secondo te il cibo tra 50 anni? Perché?

Rispondi brevemente utilizzando una frase o, se preferisci, alcune parole-chiave.
 

<textarea name="descizione" cols="40" rows="5"></textarea>
</p>

         

 2a. Secondo te, quali concetti danno più l’idea di come sarà il nostro cibo fra 50 anni?

Leggi gli abbinamenti qui sotto e scegli una parola per ogni coppia.  

</p>

         <table width="491" border="0" cellpadding="5" cellspacing="10">
          <tr height="25">
            <td width="186" valign="top"><input name="estetica" type="radio" onClick="verifica()" value="Invitante" /> Invitante</td>
            <td width="181" valign="top"><input name="estetica" type="radio" onClick="verifica()" value="Poco invitante" /> Poco invitante</td>
            <td width="110" valign="top"></td>
          </tr>
          <tr height="25">
            <td valign="top"><input name="nutrizione" type="radio" onClick="verifica()" value="Ricco di nutrienti" /> Ricco di nutrienti</td>
            <td valign="top"><input name="nutrizione" type="radio" onClick="verifica()" value="Povero di nutrienti" /> Povero di nutrienti</td>
            <td valign="top"></td>
          </tr>
          <tr height="25">
            <td valign="top"><input name="salutare" type="radio" onClick="verifica()" value="Sano" /> Sano</td>
            <td valign="top"><input name="salutare" type="radio" onClick="verifica()" value="Spazzatura" /> Spazzatura</td>
            <td valign="top"></td>
          </tr>
         <tr height="25">
            <td valign="top"><input name="naturalezza" type="radio" onClick="verifica()" value="Naturale" /> Naturale </td>
            <td valign="top"><input name="naturalezza" type="radio" onClick="verifica()" value="Artificiale" /> Artificiale</td>
            <td valign="top"></td>
          </tr>
         <tr height="25">
            <td valign="top"><input name="provenienza" type="radio" onClick="verifica()" value="Italiano" /> Italiano</td>
            <td colspan="2" valign="top"><input name="provenienza" type="radio" onClick="verifica()" value="Resto del mondo" /> Resto del mondo</td>
            </tr>
          <tr height="25">
            <td valign="top"><input name="varieta" type="radio" onClick="verifica()" value="Molto vario" /> Molto vario </td>
            <td colspan="2" valign="top"><input name="varieta" type="radio" onClick="verifica()" value="Poco vario" /> Poco vario</td>
            </tr>
          <tr height="25">
            <td valign="top"><input name="aspetto" type="radio" onClick="verifica()" value="Molto simile ad oggi" /> Simile ad oggi</td>
            <td valign="top"><input name="aspetto" type="radio" onClick="verifica()" value="Nutrimento nuovo" /> Nuovo</td>
            <td valign="top"></td>
          </tr>
          <tr height="25">
            <td valign="top"><input name="socialita" type="radio" onClick="verifica()" value="Conviviale" /> Conviviale </td>
            <td valign="top"><input name="socialita" type="radio" onClick="verifica()" value="Consumato da soli" /> Consumato da soli</td>
            <td valign="top"></td>
          </tr>
          <tr height="25">
            <td valign="top"><input name="identita" type="radio" onClick="verifica()" value="Tradizionale " /> Tradizionale</td>
            <td valign="top"><input name="identita" type="radio" onClick="verifica()" value="Multietnico" /> Multietnico</td>
            <td valign="top"></td>
          </tr>
          <tr height="25">
            <td valign="top"><input name="costoso" type="radio" onClick="verifica()" value="Poco costoso" /> Poco costoso</td>
            <td valign="top"><input name="costoso" type="radio" onClick="verifica()" value="Molto costoso" /> Molto costoso</td>
            <td valign="top"></td>
          </tr>          
          <tr height="25">
            <td valign="top"><input name="sostenibilita" type="radio" onClick="verifica()" value="Rispettoso dell’ambiente" /> Rispettoso dell’ambiente</td>
            <td colspan="2" valign="top"><input name="sostenibilita" type="radio" onClick="verifica()" value="Non rispettoso dell’ambiente" /> Non rispettoso dell’ambiente</td>
            </tr>
          <tr height="25">
            <td valign="top"><input name="democrazia" type="radio" onClick="verifica()" value="Per tutti" /> Per tutti </td>
            <td valign="top"><input name="democrazia" type="radio" onClick="verifica()" value="Per pochi" /> Per pochi </td>
            <td valign="top"></td>
          </tr>
          <tr height="25">
            <td valign="top"><input name="preparazione" type="radio" onClick="verifica()" value="Cucinato in casa" /> Cucinato in casa</td>
            <td valign="top"><input name="preparazione" type="radio" onClick="verifica()" value="Già pronto" /> Già pronto</td>
            <td valign="top"></td>
          </tr>
        </table>



2.b  Tra le alternative che hai scelto, scrivi qui sotto le 5 parole che secondo te meglio descrivono il cibo del futuro.
(Utilizza il tasto CTRL per effettuare la scelta multipla)</p>



<select name="top5" size="13" multiple id="top5">
<option value="">Scegli</option>
</select>
</form>

[annaelle]

grazie, così presa dagli inghippi che non avevo notato la tua risposta... qui continuo alacremente a modificare il js da te suggerito e sto avendo buone risposte: speriamo bene!