¿Cómo uso el form.serialize de jQuery pero excluyo los campos vacíos?

Question

Tengo un formulario de búsqueda con una cantidad de entradas de texto & amp; desplegables que 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 revisando jQuery docs y creo que podemos hacer esto en una línea usando < a href = "http://docs.jquery.com/Selectors" rel = "noreferrer"> selectores :

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

Obviamente, #myForm obtiene el elemento con id " myForm " pero al principio, lo que era menos obvio para mí fue que se necesita el carácter de espacio entre #myForm y: input, ya que es el descendant operator.

: input coincide con todas las entradas, textarea, select y button elementos.

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

Por último, también para eliminar entradas donde el valor era '.' (como se menciona en la pregunta):

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

En este caso, la yuxtaposición, es decir, colocando dos selectores de atributos uno al lado del otro , implica un AND . El uso de una coma implica un OR. ¡Lo siento si eso es obvio para la gente de CSS!

Answer 2

No pude hacer que la solución de Tom funcionara (?), pero pude hacerlo usando .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();

Answer 3

Esto funciona para mí:

data = $( "#my_form input").filter(function () {
        return !!this.value;
    }).serialize();

Answer 4

Podrías 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

He utilizado la solución anterior, pero para mí los que no funcionaron. Así que he usado el 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 6

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

Podría añadir un " serialize2 " y " serializeArray2 " funciones Por supuesto, nombrarlos algo significativo.

O la mejor manera sería escribir algo para sacar las vars sin usar del serializedFormStr. Algunas expresiones regulares que buscan = & amp; en medio de la cadena o terminando en = Cualquier magos regex alrededor?

ACTUALIZACIÓN: Me gusta más la respuesta de rogeriopvl (+1) ... especialmente porque no puedo encontrar buenas herramientas de expresiones regulares en este momento.

Answer 7

En coffeescript, haz esto:

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

Answer 8

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