Come utilizzo form.serialize di jQuery ma escludo i campi vuoti

Ho un modulo di ricerca con una serie di input di testo e menu a discesa che invia tramite un GET. Mi piacerebbe 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?

Ho esaminato i documenti di jQuery e penso che possiamo farlo in una riga usando i selettori :

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

Ovviamente #myForm ottiene l'elemento con id "myForm", ma quello che all'inizio mi era meno ovvio era che il carattere spazio è necessario tra #myForm e: input poiché è l' operatore discendente .

: input corrisponde a tutti gli elementi input, textarea, select e button.

[valore! = ''] è un attributo diverso dal filtro. La cosa strana (e utile) è che tutti: i tipi di elementi di input hanno attributi di valore anche selezioni e caselle di controllo ecc.

Infine per rimuovere anche gli input in cui il valore era "." (come menzionato nella domanda):

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

In questo caso la giustapposizione, cioè il posizionamento di due selettori di attributi uno accanto all'altro , implica un AND. L'uso di una virgola implica un OR. Scusa se questo è ovvio per le persone CSS!

Non sono riuscito a far funzionare la soluzione di Tom (?), Ma sono stato in grado di farlo utilizzando .filter()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 un'espressione regolare ...

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

Casi test:

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

Guarderei il codice sorgente per jQuery. Nell'ultima versione della linea 3287.

Potrei aggiungere le funzioni "serialize2" e "serializeArray2". ovviamente chiamali qualcosa di meschino.

O il modo migliore sarebbe scrivere qualcosa per estrarre le variabili inutilizzate da serializedFormStr. Qualche regex che cerca = & a metà stringa o che termina con = Eventuali procedure guidate regex in giro?

AGGIORNAMENTO: Mi piace di più la risposta di rogeriopvl (+1) ... soprattutto perché al momento non riesco a trovare nessun buon strumento per le espressioni regolari.

Un'alternativa alla soluzione di Rich :

$('#form').submit(function (e) {
  e.preventDefault();

  var query = $(this).serializeArray().filter(function (i) {
    return i.value;
  });

   window.location.href = $(this).attr('action') + (query ? '?' + $.param(query) : '');
});

spiegazioni:

• .submit()si aggancia submitall'evento del form
• e.preventDefault() impedisce l'invio del modulo
• .serializeArray() ci fornisce una rappresentazione in matrice della stringa di query che stava per essere inviata.
• .filter() rimuove i valori falsi (inclusi quelli vuoti) in quell'array.
• $.param(query) crea una rappresentazione serializzata e conforme all'URL del nostro array aggiornato
• l'impostazione di un valore per window.location.hrefinvia la richiesta

In coffeescript, fai questo:

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

Potresti voler guardare la funzione jquery .each (), che ti permette di iterare attraverso ogni elemento di un selettore, quindi in questo modo puoi andare a controllare ogni campo di input e vedere se è vuoto o meno e quindi rimuoverlo dal modulo utilizzando element.remove (). Dopodiché puoi serializzare il modulo.