No obtener valores a partir Seleccionar campos con jQuery

Question

Estoy tratando de poner en práctica algunas funciones ajax básica en el sitio web que estoy creando. Estoy usando el microframework Frasco y jQuery para hacer esto. Tengo mucha experiencia con Python, lo que está escrito en el frasco, pero muy poco con javascript. Esto sería por eso que decidí usar jQuery. ;) Hay un bonito ejemplo incluido con la documentación del frasco, que no tenía ningún problema para conseguir trabajo, pero cuando he aplicado el método en el ejemplo de mi código empecé a correr en problemas para conseguir jQuery para rellenar correctamente la cadena de consulta. En esencia, se analiza algunos de mis elementos de formulario, pero no todos.

Mi formulario HTML es similar al siguiente:

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

El código JavaScript es similar al siguiente:

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

Sin embargo, después de entregar mi consulta es cadena como esta:

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

Me puede obtener el valor 'msat_length' al cambio correctamente, ninguno de los otros. Si cambio la .val () para .text () en la línea de 'msat_size' en el Javascript, el nombre aparecerá en la cadena de consulta, pero sin un valor

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

¿Alguna idea sobre cómo solucionar este problema sería muy apreciada. Gracias!

Answer 1

En lugar de hacer todo ese trabajo complicado, se debe tratar de tomar ventaja del método de .serialize() de jQuery. Trate de esta manera:

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

Aquí está la documentación sobre el método .serialize(): http://api.jquery.com/serialize/

Y una prueba donde se muestran en acción: http://jsfiddle.net/Ender/q3mdw/

Answer 2

Dejando a un lado las cuestiones de su acercamiento a la serialización, la causa inmediata del problema es que se está interpretando mal algunos de sus elementos de formulario:

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

Esto supone que sólo se desea que los valores de casilla de verificación si están marcadas. Por supuesto, puede agregar lógica condicional para omitir las casillas de verificación si están sin control, o proporcionar un valor por defecto.

Answer 3

Probar

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