Non ricevendo i valori da Seleziona campi con jQuery

Question

Sto cercando di implementare alcune funzionalità Ajax di base nel sito web che sto creando. Sto utilizzando il microframework Flask e jQuery per fare questo. Ho un sacco di esperienza con Python, ciò che è scritto in Flask, ma molto poco con javascript. Questo sarebbe il motivo per cui ho deciso di utilizzare jQuery. ;) C'è una bella esempio incluso con la documentazione Flask, che non ho avuto nessuna difficoltà a trovare lavoro, ma quando ho applicato il metodo nell'esempio al mio codice ho iniziato a correre in problemi ottenere jQuery per popolare correttamente la stringa di query. In sostanza, si analizza alcuni dei miei elementi del modulo, ma non tutti.

Il mio HTML aspetto della forma come questo:

<form action method="GET" class="span-11 inline"> 
    <fieldset> 

    <div class='span-5'> 
    <label for="msat_size">Msat Size:</label> 
    </div> 

    <div class='span-5 last'> 
    <select id="msat_size" name="msat_size"><option value="mono">Mono</option><option value="di">Di</option><option value="tri">Tri</option></select> 
    </div> 

    <div class='span-5'> 
    <label for="msat_length">Msat Length:</label> 
    </div> 
    <div class='span-5 last'> 
    <input class="text" id="msat_length" maxlength="3" name="msat_length" size="3" style="width:48px" type="text" value="0" /> 
    </div> 

    <div class='span-5'> 
    <label for="msat_perfect">Perfect Msats:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id="msat_perfect" name="msat_perfect" type="checkbox" value="y" /> 
    </div> 

    <div class='span-5'> 
    <label for="combine_loci">Combine Microsatellites:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id="combine_loci" name="combine_loci" type="checkbox" value="y" /> 
    </div> 

    <div class='span-5'> 
    <label for="design_primers">Design Primers:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id="design_primers" name="design_primers" type="checkbox" value="y" /> 
    </div> 

    <div class='span-5'> 
    <label for="tag_primers">Tag Primers:</label> 
    </div> 
    <div class='span-5 last'> 
    <select id="tag_primers" name="tag_primers"><option selected="selected" value="None">No Tag</option><option value="cag">CAG Tag</option><option value="m13">M13R Tag</option></select> 
    </div> 

    <div class='span-5 prepend-5 last'> 
            <button id="submit_msats" name="submit_msats" type="submit" value="submit_msats" class="button positive"> 
                <img src="/static/css/plugins/buttons/icons/tick.png" alt=""/> Submit
            </button> 
    </div> 
    </fieldset> 
</form>    

I miei sguardi javascript come questo:

<script type=text/javascript>
  $(function() {
    $('.button').bind('click', function() {
      $.getJSON('/query_result', {
        msat_size: $('input[id="msat_size"]').val(),
        msat_length: $('input[name="msat_length"]').val(),
        msat_perfect: $('input[name="msat_perfect"]').val(),
        combine_loci: $('input[name="combine_loci"]').val(),
        design_primers: $('input[name="design_primers"]').val(),
        tag_primers: $('input[name="tag_primers"]').val(),
        }, function(data) {
        $("#stat1").text(data.msat_size),
        $("#stat2").text(data.msat_length);
      });
      return false;
    });
  });
</script>

Ma dopo che presento la mia domanda sguardi stringa in questo modo:

/query_result?msat_length=0&msat_perfect=y&combine_loci=y&design_primers=y

posso ottenere il valore 'msat_length' al cambiamento correttamente, nessuno degli altri. Se cambio la .VAL () per .text () in linea 'msat_size' in javascript, verrà visualizzato il nome nella stringa di query, ma senza un valore

/query_result?msat_size=&msat_length=0&msat_perfect=y&combine_loci=y&design_primers=y

Ogni pensiero su come risolvere questo problema sarebbe molto apprezzato. Grazie!

Answer 1

Invece di fare tutto quel lavoro complicato, si dovrebbe provare a prendere vantaggio del metodo di .serialize() di jQuery. Prova in questo modo:

$(function() {
    $('.button').bind('click', function() {
        $.getJSON('/query_result?' + $(this).closest('form').serialize(), function(data) {
            $("#stat1").text(data.msat_size), $("#stat2").text(data.msat_length);
        });
        return false;
    });
});

Ecco la documentazione sul metodo .serialize(): http://api.jquery.com/serialize/

E una demo che mostra in azione: http://jsfiddle.net/Ender/q3mdw/

Answer 2

mettendo da parte le questioni di vostro approccio alla serializzazione, la causa immediata del problema è che si sta misidentifying alcuni dei vostri elementi del modulo:

msat_size: $('select#msat_size').val(), // select, not input
msat_length: $('input#msat_length').val(), // bracket notation unnecessary
msat_perfect: $('input#msat_perfect:checked').val(), // using ID is better
combine_loci: $('input#combine_loci:checked').val(), // use :checked
design_primers: $('input#design_primers:checked').val(),
tag_primers: $('select#tag_primers').val() // select, not input

Questo presuppone desideri solo i valori casella di controllo se sono controllati. Naturalmente, è possibile aggiungere logica condizionale di omettere le caselle di controllo se sono senza controllo, o di fornire un valore predefinito.

Answer 3

Prova questo

  $(function() {

    $('#submit_msats').bind('click', function(ev) {

      ev.stopPropagation();

      var context = $('form'),
          sendData =  {
            msat_size: $('#msat_size', context).val(),
            msat_length: $('#msat_length', context).val(),
            msat_perfect: $('#msat_perfect', context).val(),
            combine_loci: $('#combine_loci', context).val(),
            design_primers: $('#design_primers', context).val(),
            tag_primers: $('#tag_primers', context).val()
          };

      alert(sendData.msat_length);

      $.getJSON('/query_result', sendData, function(data) {

        $("#stat1").text(data.msat_size),
        $("#stat2").text(data.msat_length);

      });

      return false;
    });
  });