Come uso il form.serialize di jQuery ma escludo i campi vuoti
-
03-07-2019 - |
Domanda
Ho un modulo di ricerca con un numero di input di testo e amp; menu a discesa che invia tramite GET. Vorrei avere un URL di ricerca più pulito rimuovendo i campi vuoti dalla stringa di query quando viene eseguita una ricerca.
var form = $("form");
var serializedFormStr = form.serialize();
// I'd like to remove inputs where value is '' or '.' here
window.location.href = '/search?' + serializedFormStr
Qualche idea su come posso farlo usando jQuery?
Soluzione
Ho esaminato i documenti jQuery e penso che possiamo farlo in una riga usando < a href = "http://docs.jquery.com/Selectors" rel = "noreferrer"> selettori :
$("#myForm :input[value!='']").serialize() // does the job!
Ovviamente #myForm ottiene l'elemento con id " myForm " ma all'inizio ciò che era meno ovvio per me era che il carattere spaziale è necessario tra #myForm e: input in quanto è descendant operatore.
: input corrisponde a tutti gli input, area di testo, selezione e pulsante elementi.
[value! = ''] non è un attributo filtro uguale. La cosa strana (e utile) è che tutti: input i tipi di elemento hanno attributi di valore anche di selezione e checkbox ecc.
Infine, per rimuovere anche gli input in cui il valore era '.' (come menzionato nell'interrogazione):
$("#myForm :input[value!=''][value!='.']").serialize()
In questo caso la giustapposizione, ovvero posizionando due selettori di attributi uno accanto all'altro , implica un AND . L'uso di una virgola implica un OR. Scusate se è ovvio per le persone CSS!
Altri suggerimenti
Non sono riuscito a far funzionare la soluzione di Tom (?), ma sono stato in grado di farlo utilizzando .filter ()
con una breve funzione per identificare i campi vuoti. Sto usando jQuery 2.1.1.
var formData = $("#formid :input")
.filter(function(index, element) {
return $(element).val() != '';
})
.serialize();
Questo funziona per me:
data = $( "#my_form input").filter(function () {
return !!this.value;
}).serialize();
Potresti farlo con una regex ...
var orig = $('#myForm').serialize();
var withoutEmpties = orig.replace(/[^&]+=\.?(?:&|$)/g, '')
Casi di prova:
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
Ho usato la soluzione sopra ma per me quelli non hanno funzionato. Quindi ho usato il seguente codice
$('#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;
});
Può essere utile per qualcuno
Vorrei esaminare il codice sorgente per jQuery. Nell'ultima versione della riga 3287.
Potrei aggiungere in un " serialize2 " e "serializeArray2" funzioni. ovviamente nominali qualcosa di meschino.
O il modo migliore sarebbe scrivere qualcosa per estrarre i vars non utilizzati dal serializedFormStr. Qualche regex che cerca = & amp; a metà stringa o termina con = Ci sono maghi regex in giro?
UPDATE: Mi piace la risposta di rogeriopvl meglio (+1) ... soprattutto perché non riesco a trovare nessun buon strumento regex in questo momento.
In coffeescript, procedere come segue:
serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()
Potresti voler guardare la funzione .each () jquery, che ti permette di scorrere attraverso ogni elemento di un selettore, quindi in questo modo puoi andare a controllare ogni campo di input e vedere se è vuoto o no e quindi rimuoverlo dal modulo utilizzando element.remove (). Successivamente è possibile serializzare il modulo.