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
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 0
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 0
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 4
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
H problema carrello woocommerce PHP 2
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
M Problema su query JOIN in tre tabelle PHP 0
S Problema esportazione tabelle Mysql in Excel PHP 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
M Problema su update di 3 tabelle PHP 1
T problema con select dinamica con jquery Javascript 0
A Problema checkout carrello php PHP 2
R Problema al server Domini 0
A Problema nel passare la variabile PHP 0
G Problema update di un database PHP 0
S Problema con spazi bianchi HTML e CSS 4
E Problema motore di ricerca FULL_TEXT PHP 0
Tommy03 Problema durata cookie PHP 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
I PROBLEMA CODICE INSERTION SORT C C/C++ 2
I PROBLEMA CODICE C - INSERTION SORT Presentati al Forum 1
N Problema pennelli Photoshop Photoshop 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
Y Problema visualizzazione PDF generato da fpdf PHP 1

Discussioni simili