从选择字段与jQuery没有得到值

Question

我试图在我创建的网站中实现一些基本的ajax功能。我使用Flask微框架和jQuery来做到这一点。我有很多python的经验，Flask写的是什么，但很少用javascript。这就是为什么我决定使用jQuery。 ;）Flask文档中包含了一个很好的example，我没有任何麻烦，但是当我将示例中的方法应用于我的代码时，我开始遇到了让jQuery正确填充查询字符串的问题。本质上，它解析了我的一些表单元素，但不是全部。

我的HTML形式如下：

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

我的JavaScript看起来像这样：

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

但我提交后，我的查询字符串看起来是这样的：

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

我可以使'msat_length'的值正确更改，其他都不会。如果我改变.VAL（）与.text区段（）在JavaScript的“msat_size”行，该名称将出现在查询字符串，但没有一个值

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

关于如何解决此问题的任何想法会不胜感激。谢谢！

Answer 1

而不是做那么复杂的工作，你应该尝试采取jQuery的.serialize()方法的优点。试着这样说：

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

下面是对.serialize()方法的文档：http://api.jquery.com/serialize/

，并显示在行动它演示：http://jsfiddle.net/Ender/q3mdw/

Answer 2

试试这个

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

先不谈你的方法的问题，以系列化，直接原因问题在于你错误地识别了一些表单元素：

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 

这假定您只需要复选框值，如果他们被选中。您当然可以添加条件逻辑来忽略复选框（如果未选中）或提供默认值。