Problema multi select form

PazzoFrontEnd

Utente Attivo
8 Ott 2013
46
0
6
Ciao ragazzi, scusate se vi do ancora fastidio ma ho un problema un po più urgente :D
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)

Codice:
<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!! :D

form_multiplo.jpg
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, ma non hai scritto neanche un po di javascript ?
Codice:
$("select").change(function(){
        
    })
 

PazzoFrontEnd

Utente Attivo
8 Ott 2013
46
0
6
Ciao, ma non hai scritto neanche un po di javascript ?
Codice:
$("select").change(function(){
        
    })

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

Codice:
$(#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...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non serve che ripeti la funzione per ogni select guarda questo esempio
HTML:
<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

Utente Attivo
8 Ott 2013
46
0
6
Scusa Criric se rispondo solo ora. Allora, la situazione è cambiata (non per mia volontà). Cerco di spiegarti. Ho il seguente codice:

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:

Codice:
  $('.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

Utente Attivo
8 Ott 2013
46
0
6
Buongiorno a tutti.
Ho trovato una soluzione, forse non bellissima, ma abbastanza efficace:

Codice:
    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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
N problema script php mysql multi upload immagini PHP 31
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 0
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 0
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 3
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 0
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 10
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 1
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 1
R Problema connessione db PHP 7
M problema if PHP 2

Discussioni simili