¿Cómo se usa jQuery's form.serialize pero excluyo campos vacíos

Question

Tengo un formulario de búsqueda con un número de entradas de texto & desplegables que se envía a través de un GET. Me gustaría tener una URL de búsqueda más limpia eliminando los campos vacíos de la cadena de consulta cuando se realiza una búsqueda.

var form = $("form"); 
var serializedFormStr = form.serialize(); 
// I'd like to remove inputs where value is '' or '.' here 
window.location.href = '/search?' + serializedFormStr 

¿Alguna idea de cómo puedo hacer esto usando jQuery?

Answer 1

He estado mirando por encima del jQuery docs y creo que podemos hacer esto en una línea usando selectors:

$("#myForm :input[value!='']").serialize() // does the job! 

Obviamente #myForm obtiene el elemento con id "myForm" pero lo que era menos ob Para mí, al principio era que el carácter de espacio es necesario entre #myForm y: entrada, ya que es el operador descendant.

:input coincide con todos los elementos de entrada, texto, selección y botón.

[value!=''] es un filtro de atributo no igual. Lo extraño (y útil) es que todos: los tipos de elemento de entrada tienen atributos de valor incluso selecciones y casillas de verificación, etc.

Finalmente, también se eliminan las entradas cuyo valor era '.' (Como se menciona en la pregunta):

$("#myForm :input[value!=''][value!='.']").serialize() 

En este caso yuxtaposición, es decir, placing two attribute selectors next to each other, implica un AND. Using a comma implica una OR. ¡Lo siento si eso es obvio para las personas de CSS!

Answer 2

Me gustaría ver el código fuente de jQuery. En la última versión de la línea 3287.

Podría agregar las funciones "serialize2" y "serializeArray2". por supuesto, llámales algo mezquino.

O la mejor manera sería escribir algo para extraer los vars no utilizados de serializedFormStr. Algunas expresiones regulares que buscan = & en la mitad de la cadena o que terminan en = ¿Hay asistentes de expresiones regulares?

ACTUALIZACIÓN: me gusta la respuesta de rogeriopvl mejor (1) ... sobre todo porque no puedo encontrar ninguna herramienta buenas expresiones regulares en este momento.

Answer 3

Es posible que desee ver la función jquery .each() que le permite recorrer cada elemento de un selector, de esta manera puede verificar cada campo de entrada y ver si está vacío o no y luego eliminar desde el formulario usando element.remove(). Después de eso, puedes serializar el formulario.

Answer 4

Usted podría hacerlo con una expresión regular ...

var orig = $('#myForm').serialize(); 
var withoutEmpties = orig.replace(/[^&]+=\.?(?:&|$)/g, '') 

casos de prueba:

orig = "a=&b=.&c=&d=.&e="; 
new => "" 

orig = "a=&b=bbb&c=.&d=ddd&e="; 
new => "b=bbb&d=ddd&" // dunno if that trailing & is a problem or not 

Answer 5

En CoffeeScript, hacer esto:

serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize() 

Answer 6

He utilizado la solución anterior, pero para mí los que no trabajaban.Así que he utilizado siguiente código

$('#searchform').submit(function(){ 

      var serializedData = $(this).serializeArray(); 
      var query_str = ''; 

      $.each(serializedData, function(i,data){ 
       if($.trim(data['value'])){ 
        query_str += (query_str == '') ? '?' + data['name'] + '=' + data['value'] : '&' + data['name'] + '=' + data['value']; 
       } 
      }); 
      console.log(query_str); 
      return false; 
     }); 

Puede ser útil para alguien

Answer 7

yo no era capaz de conseguir la solución de Tom a trabajar (?), Pero yo era capaz de hacer esto utilizando .filter() con una función corta para identificar campos vacíos Estoy usando jQuery 2.1.1.

var formData = $("#formid :input") 
    .filter(function(index, element) { 
     return $(element).val() != ''; 
    }) 
    .serialize();