Ne pas obtenir les valeurs de Sélectionner les champs avec jQuery

Question

Je suis en train de mettre en œuvre certaines fonctionnalités de base ajax sur le site que je crée. J'utilise le microframework Flask et jQuery pour le faire. J'ai beaucoup d'expérience avec python, ce Flask est écrit, mais très peu avec javascript. Ce serait la raison pour laquelle j'ai décidé d'utiliser jQuery. ;) Il y a une belle exemple inclus dans la documentation Flask que je n'ai pas aucun problème pour travailler, mais quand j'ai appliqué la méthode dans l'exemple à mon code, je commencé à courir dans des problèmes pour obtenir jQuery pour remplir correctement la chaîne de requête. Pour l'essentiel, il analyse certains de mes éléments de forme, mais pas tous.

Mon formulaire HTML ressemble à ceci:

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

Mon apparence javascript comme ceci:

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

Mais après que je soumets mes regards de chaîne de requête comme ceci:

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

Je peux obtenir la valeur « msat_length » au changement correctement, aucun des autres. Si je change le .val () à .text () en ligne « msat_size » dans le javascript, le nom apparaît dans la chaîne de requête, mais sans valeur

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

Toute réflexion sur la façon de résoudre ce problème serait grandement apprécié. Merci!

Answer 1

Au lieu de faire tout ce travail compliqué, vous devriez essayer de profiter de la méthode de .serialize() jQuery. Essayez comme ceci:

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

Voici la documentation sur la méthode .serialize(): http://api.jquery.com/serialize/

Et une démo montrant en action: http://jsfiddle.net/Ender/q3mdw/

Answer 2

Mettre de côté les questions de votre approche de sérialisation, la cause immédiate du problème est que vous êtes mal identifier certains de vos éléments de formulaire:

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

Cela suppose que vous voulez que les valeurs de case à cocher si elles sont vérifiées. Vous pouvez ajouter des cours logique conditionnelle à omettre les cases à cocher si elles ne sont pas cochés, ou de fournir une valeur par défaut.

Answer 3

essayer cette

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