Como faço para usar Form.serialize do jQuery mas excluir campos vazios
-
03-07-2019 - |
Pergunta
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?
Solução
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!
Outras dicas
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();
Isso funciona para mim:
data = $( "#my_form input").filter(function () {
return !!this.value;
}).serialize();
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
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
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.
Em CoffeeScript, faça o seguinte:
serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()
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.