Не получать значения из полей выбора с помощью jQuery

Question

Я пытаюсь реализовать некоторые базовые функции ajax на создаваемом веб-сайте. Для этого я использую микрофрейм Flask и jQuery. У меня большой опыт работы с python, на котором написан Flask, но очень мало с javascript. Вот почему я решил использовать jQuery. ;) Есть хороший пример , включенный в документацию Flask, с которым у меня не возникло никаких проблем при работе, но когда я применил метод в примере к своему коду, у меня начались проблемы с получением 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 () в строке «msat_size» в javascript, имя появится в строке запроса, но без значения

/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

Если оставить в стороне проблемы вашего подхода к сериализации, непосредственной причиной проблемы является то, что вы неправильно идентифицируете некоторые из элементов формы:

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

Предполагается, что вам нужны только значения флажков, если они отмечены. Разумеется, вы можете добавить условную логику, чтобы снять флажки, если они не отмечены, или указать значение по умолчанию.

Answer 3

попробуйте

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