Como faço para usar Form.serialize do jQuery mas excluir campos vazios

Question

Eu tenho um formulário de pesquisa com um número de entradas de texto e queda baixos que envia através de um GET. Eu gostaria de ter uma url pesquisa mais limpa, removendo os campos vazios da querystring quando uma pesquisa é realizada.

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

Qualquer idéia de como posso fazer isso usando jQuery?

Answer 1

Eu estive procurando sobre o jQuery docs e acho que podemos fazer isso em uma linha usando < a href = "http://docs.jquery.com/Selectors" rel = "noreferrer"> seletores :

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

Obviamente #myForm recebe o elemento com id "myForm" mas o que era menos óbvio para mim em primeiro lugar foi que o caractere de espaço é necessário entre #myForm e: de entrada, como é o descendente operador.

: entrada combina todas as entradas, textarea, selecionar e botão elementos.

[valor! = ''] é um atributo não igual filtro. O estranho (e útil) é que todos:. Input tipos de elemento tem atributos de valor até mesmo seleciona e caixas etc

Finalmente, para também remover entradas onde o valor foi '' (Como mencionado na pergunta):

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

Neste caso justaposição, ou seja, colocando dois seletores de atributos ao lado do outro , implica um E . Usando uma vírgula implica um OR. Desculpe se isso é óbvio para CSS pessoas!

Answer 2

Eu não era capaz de obter solução de Tom para o trabalho (?), Mas eu era capaz de fazer isso usando .filter() com uma pequena função para identificar campos vazios. Eu estou usando jQuery 2.1.1.

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

Answer 3

Isso funciona para mim:

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

Answer 4

Você poderia fazer isso com um regex ...

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

Os casos de teste:

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

Eu usei acima solução, mas para mim aqueles não funcionou. Então eu usei seguinte 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;
        });

Pode ser útil para alguém

Answer 6

Eu olhava para o código fonte do jQuery. Na última linha versão 3287.

eu poderia acrescentar em um "serialize2" e funções "serializeArray2". é claro nomeá-los algo meaniful.

Ou a melhor maneira seria escrever algo para puxar o não utilizado vars fora do serializedFormStr. Alguns regex que procura = & em cadeia de meados ou fim in = Qualquer regex assistentes ao redor?

UPDATE: I como a resposta do rogeriopvl melhor (+1) ... especialmente porque eu não posso encontrar todas as ferramentas bom regex agora.

Answer 7

Em CoffeeScript, faça o seguinte:

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

Answer 8

Você pode querer olhar para a função jquery .each (), que permite que você para percorrer cada elemento de um selector, assim desta forma você pode ir verificar cada campo de entrada e ver se ele está vazio ou não e, em seguida, removê-lo a partir da forma utilizando element.remove (). Depois que você pode serializar o formulário.