Come usare jQuery form.serialize ma escludere i campi vuoti

Question

Ho un modulo di ricerca con un numero di input di testo & menu a discesa che invia tramite GET. Mi piacerebbe avere un url di ricerca più pulito rimuovendo i campi vuoti dalla querystring 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 utilizzando jQuery?

Answer 1

Ho cercato sul jQuery docs e penso che possiamo farlo in una sola riga usando selectors:

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

Ovviamente #myForm ottiene l'elemento con ID "myForm", ma quello che era meno ob inizialmente per me è stato il fatto che il carattere dello spazio è necessario tra #myForm e: input come è l'operatore descendant.

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

[value!=''] è un attributo filtro non uguale. La cosa strana (e utile) è quella: all: input tipi di elementi hanno attributi valore anche seleziona e caselle di controllo ecc.

Infine per rimuovere anche gli input in cui il valore era '.' (Come indicato nella domanda):

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

In questo caso giustapposizione, cioè placing two attribute selectors next to each other, implica un AND. Using a comma implica un OR. Scusa se questo è ovvio per i CSS!

Answer 2

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

È possibile aggiungere le funzioni "serialize2" e "serializeArray2". ovviamente chiamarli qualcosa di meschino.

O il modo migliore sarebbe scrivere qualcosa per estrarre i vars inutilizzati da serializedFormStr. Qualche regex che cerca = & a metà stringa o termina in = Qualsiasi procedura guidata di regex in giro?

UPDATE: mi piace la risposta di rogeriopvl migliore (+1) ... soprattutto perché non riesco a trovare dei buoni strumenti regex al momento.

Answer 3

Si potrebbe voler esaminare la funzione jQuery .each(), che consente di scorrere tutti gli elementi di un selettore, in questo modo è possibile controllare ciascun campo di input e vedere se è vuoto o meno e quindi rimuovere dal modulo usando element.remove(). Successivamente è possibile serializzare il modulo.

Answer 4

Si potrebbe fare con una regex ...

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

Casi di 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 

Answer 5

In CoffeeScript, fare questo:

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

Answer 6

Ho usato sopra soluzione, ma per me chi non ha lavorato.Così ho usato 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 7

non ero in grado di ottenere la soluzione di Tom a lavorare (?), Ma sono stato in grado di farlo utilizzando .filter() con una breve funzione di identificare i campi vuoti. Sto usando jQuery 2.1.1.

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