Come uso il form.serialize di jQuery ma escludo i campi vuoti

Question

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?

Answer 1

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!

Answer 2

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();

Answer 3

Questo funziona per me:

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

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

In coffeescript, procedere come segue:

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

Answer 8

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.