Nicht erhalten Werte von Select Fields mit jQuery

Question

Ich versuche, einige grundlegende Ajax-Funktionen in eine Website zu implementieren, die ich gerade erst erstelle. Ich benutze das Flask-Mikroframework und jQuery, dies zu tun. Ich habe eine Menge Erfahrung mit Python, was Flask geschrieben ist, aber sehr wenig mit javascript. Aus diesem Grund habe ich mich für jQuery entschieden ;) Es gibt eine nette exemple die in der Flask-Dokumentation enthalten ist und mit der ich keine Probleme hatte, aber als ich die Methode im Beispiel auf meinen Code anwandte, hatte ich Probleme, jQuery dazu zu bringen, den Query-String korrekt auszufüllen. Im Wesentlichen, es parst einige meiner Form-Elemente, aber nicht alle.

Mein HTML-Formular sieht wie folgt aus:

<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>    

Mein Javascript sieht wie folgt aus:

<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>

Aber nach dem Absenden sieht meine Abfragezeichenfolge wie folgt aus:

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

Ich kann den Wert "msat_length" richtig ändern, aber keinen der anderen Werte. Wenn ich .val() in .text() in der "msat_size"-Zeile im Javascript ändere, erscheint der Name in der Abfragezeichenfolge, aber ohne Wert

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

Für Hinweise zur Behebung dieses Problems wären wir Ihnen sehr dankbar. Danke!

Answer 1

Anstatt all diese komplizierte Arbeit zu machen, sollten Sie versuchen, die Vorteile der jQuery .serialize() Methode. Versuchen Sie es so:

$(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;
    });
});

Hier ist die Dokumentation über das .serialize() Methode: http://api.jquery.com/serialize/

Und eine Demo, die es in Aktion zeigt: http://jsfiddle.net/Ender/q3mdw/

Answer 2

Abgesehen von Ihrem Ansatz zur Serialisierung, ist die unmittelbare Ursache des Problems, dass Sie einige Ihrer Formularelemente falsch identifizieren:

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

Dabei wird davon ausgegangen, dass Sie die Werte der Kontrollkästchen nur dann haben wollen, wenn sie markiert sind. Sie können natürlich eine bedingte Logik hinzufügen, um die Kontrollkästchen auszulassen, wenn sie nicht angekreuzt sind, oder einen Standardwert angeben.

Answer 3

Versuchen Sie dies

  $(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;
    });
  });