Problema multi select form

[PazzoFrontEnd]

Ciao ragazzi, scusate se vi do ancora fastidio ma ho un problema un po più urgente
innanzitutto vi posto un'immagine di mockup che può farvi capire meglio quello che devo fare.
Devo realizzare un form a domanda multipla ed ogni domanda avrà più risposte e dovrà essere una select. (devo modificarne la grafica per questo una select -> option e non una checkbox)

<form action="result.php" method="post" id="myForm" class="">

<label>DOMANDA 1</label>
<select>
      <option>Risposta 1</option>
      <option>Risposta 2</option>
      <option>Risposta 3</option>
</select>

<label>DOMANDA 2</label>
<select>
      <option>Risposta 1</option>
      <option>Risposta 2</option>
      <option>Risposta 3</option>
</select>

<label>DOMANDA 3</label>
<select>
      <option>Risposta 1</option>
      <option>Risposta 2</option>
      <option>Risposta 3</option>
</select>

<input type="submit" value="INVIA" />
</form>

Ora come posso fare con Jquery per:
- fare la chiamata ajax che mi prenda i valori di tutte le risposte "checkate";
- rendere il pulsante INVIA opaco se non si sono selezionate le risposte per tutte le domande (un unica risposta per ogni domanda) e cliccabile solo dopo le risposte di tutte?

Grazie a chi mi saprà aiutare!!

 

[criric]

Ciao, ma non hai scritto neanche un po di javascript ?

$("select").change(function(){
        
    })

 

[PazzoFrontEnd]

Ciao, ma non hai scritto neanche un po di javascript ?

$("select").change(function(){
        
    })

Si scusa...
potrei fare una cosa del genere per ogni select attribuendo ad ognuno un id, che dici?

$(#myForm select#one).change( function(e) {
     var risposta1 = $(e.target).val();
})
$(#myForm select#two).change( function(e) {
     var risposta2 = $(e.target).val();
})
$(#myForm select#three).change( function(e) {
     var risposta3 = $(e.target).val();
})

Ma poi come gestisco la chiamata ajax relativa alla action del form? e in secondo luogo (soprattutto) io non so quante domande ci saranno...

 

[PazzoFrontEnd]

mmm....sinceramente pensavo di poter gestire tutto insieme e poter utilizzare .serialize()

 

[criric]

non serve che ripeti la funzione per ogni select guarda questo esempio

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language ="javascript">
            
    $(document).ready(function(){	            
        $("select").change(function(){
            var domanda = $(this).attr("name");
            var risposta = $(this).val();
            alert(domanda + " : " + risposta);
        });  
    
    });
</script>
<form action="result.php" method="post" id="myForm" class="">

    <label>DOMANDA 1</label>
    <select name="domanda1">
        <option>Risposta 1</option>
        <option>Risposta 2</option>
        <option>Risposta 3</option>
    </select>

    <label>DOMANDA 2</label>
    <select name="domanda2">
        <option>Risposta 1</option>
        <option>Risposta 2</option>
        <option>Risposta 3</option>
    </select>

    <label>DOMANDA 3</label>
    <select name="domanda3">
        <option>Risposta 1</option>
        <option>Risposta 2</option>
        <option>Risposta 3</option>
    </select>

    <input type="submit" value="INVIA" />
</form>

 

[PazzoFrontEnd]

Scusa Criric se rispondo solo ora. Allora, la situazione è cambiata (non per mia volontà). Cerco di spiegarti. Ho il seguente codice:

  <section class="wrapper">
           
                      <form name="answer" id="formMultiplo" method="post" action="">

                          <div id="multilevel">

                                  <div class="domanda" id="1">
                                      <span class="domanda">Domanda 1</span>
                                      <ul>
                                         <li>
                                            <span class="">risposta1</span>
                                            <span class="voto"><a href="#select" class="1">VOTA</a></span>
                                         </li>
                                         <li>
                                            <span class="">risposta2</span>
                                            <span class="voto"><a href="#select" class="2">VOTA</a></span>
                                         </li>
                                         <li>
                                            <span class="">risposta3</span>
                                            <span class="voto"><a href="#select" class="3">VOTA</a></span>
                                         </li>
                                      </ul>
                                  </div>

                                  <div class="domanda" id="2">
                                      <span class="domanda">Domanda 2</span>
                                      <ul>
                                           <li>
                                              <span class="">risposta1</span>
                                              <span class="voto"><a href="#select" class="1">VOTA</a></span>
                                           </li>
                                           <li>
                                              <span class="">risposta2</span>
                                              <span class="voto"><a href="#select" class="2">VOTA</a></span>
                                           </li>
                                           <li>
                                              <span class="">risposta3</span>
                                              <span class="voto"><a href="#select" class="3">VOTA</a></span>
                                           </li>
                                      </ul>
                                  </div>

                                  <div class="domanda" id="3">
                                      <span class="domanda">Domanda 3</span>
                                      <ul>
                                         <li>
                                            <span class="">risposta1</span>
                                            <span class="voto"><a href="#select" class="1">VOTA</a></span>
                                         </li>
                                         <li>
                                            <span class="">risposta2</span>
                                            <span class="voto"><a href="#select" class="2">VOTA</a></span>
                                         </li>
                                         <li>
                                            <span class="">risposta3</span>
                                            <span class="voto"><a href="#select" class="3">VOTA</a></span>
                                         </li>
                                      </ul>
                                  </div>

                            </div>

                            <div class="tasto_bottom">
                                <div class="over"></div>
                                <a href="#vota" class="">INVIA</a> 
                            </div>
                        
                      </form>
          
     </section>

Come vedi niente più input checkbox o select, solo <ul>, <li> e <a>. Premesso che non posso modificare la struttura, adesso devo assolutamente trovare un modo per:

a) Per ogni domanda (racchiusa all'interno del div "domanda"), selezionare solo una risposta (come se fosse una select anche se in realtà non lo è) e in questo caso fare una specie di toggle con un bg differente alternativamente ai bottoni delle altre possibili risposte scartate. Ho creato questo non so se è corretto, mi sembra molto arzigogolato, anche se per il bg funziona e dà una parvenza di select all'utente:

  $('.domanda ul li a').click( function(){
              $(this).parent().parent().siblings().children().children("a").css({ "background" : "black" });
              $(this).css({ "background" : "red" }); //questo è il bg del bottone "selezionato", nei css è "black"
  });

b) in secondo luogo, come puoi vedere sotto c'è il div "tasto_bottom" che contiene un altra ancora che sarà un bottone che al document.ready è opaco (overlay posto sopra con un'opacità e uno z-index). Quando saranno "selezionate" tutte le risposte (come detto al punto a) si attiverà e sarà cliccabile. Il problema è: come faccio a far capire a jquery che si deve attivare solo se è selezionata una risposta per ogni domanda? E' importante perchè al click su INVIA partirà la chiamata ajax.

c) Di conseguenza, devo prendere il valore per ogni risposta scelta, passato nella classe dell'ancora (es: <a href="#select" class="3">). Avevo pensato di "pusharle" in un array e inviarle tramite post. Il fatto è che non ho una select...e quindi se l'utente clicca 2 volte sulla stessa ancora il valore me lo prende 2 volte, o peggio ancora se clicca su un altra possibile risposta mi prende 2 diversi valori....come posso fare?

Spero di essere stato chiaro...sono un po incasinato... :O

 

[PazzoFrontEnd]

Buongiorno a tutti.
Ho trovato una soluzione, forse non bellissima, ma abbastanza efficace:

    var arrayRisposte = [];
    var totalDomande = $(".domanda").length;
         
          $('.domanda ul li a').click( function(){

              var parent = $(this).parents(".domanda");
              $(parent).attr("data-selected", $(this).attr('class') );

              $(this).parent().parent().siblings().children().children("a").css({ "background" : "black", "z-index" : "-10000" });
              $(this).css({ "background" : "red", "z-index" : "0" });

              var totalSelected = $("[data-selected]").length;
          
              if ( totalSelected == totalDomande ) {
                $(".vota_bottom .over").fadeOut(500);
              }
               
          });

          $(".tasto_bottom a[href=#vota]").click( function(){

              arrayRisposte = $(".domanda").map( function(){
                return $(this).attr("data-selected");
              })
              console.log(arrayAnswer); //mi restituisce l'array con i valori selezionati e passati come data-selected ai div wrapper
               
              return false;
          });

Ho ottenuto sia l'effetto switch tra i background dei bottoni, sia la possibilità che il tasto dentro "tasto_bottom" sia cliccabile solo al click di ogni bottone, ma soprattutto l'array dei valori su cui si è cliccato da utilizzare nell'oggetto della chiamata $.post.