Je n'essaie pas d'obtenir des valeurs de Select Fields avec jQuery

Question

J'essaye d'implémenter certaines fonctionnalités ajax de base dans le site web que je crée. J'utilise le microframework Flask et jQuery pour le faire. J'ai beaucoup d'expérience avec python, ce que Flask est écrit, mais très peu avec javascript. C'est pourquoi j'ai décidé d'utiliser jQuery. ;) Il y a un bon example inclus avec la documentation de Flask que je n'ai eu aucun problème à travailler, mais quand j'ai appliqué la méthode dans l'exemple à mon code j'ai commencé à rencontrer des problèmes pour que jQuery remplisse correctement la chaîne de requête. Essentiellement, il analyse certains de mes éléments de formulaire, 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 javascript ressemble à 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 ma chaîne de requête ressemble à ceci:

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

I peut obtenir la valeur 'msat_length' pour changer 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 corriger cela être grandement apprécié. Merci!

Answer 1

Au lieu de faire tout ce travail compliqué, vous devriez essayer de profiter de la méthode .serialize() de 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; 
    }); 
}); 

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

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

Answer 3

En mettant de côté les problèmes de votre approche de sérialisation, la cause immédiate du problème est que vous identifiez mal 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 ne voulez que les valeurs de la case à cocher si elles sont cochées. Vous pouvez bien sûr ajouter une logique conditionnelle pour omettre les cases à cocher si elles ne sont pas cochées ou fournir une valeur par défaut.