Jak korzystać z formularza jQuery.serialize, ale wyklucz puste pola

Question

Mam formularz wyszukiwania z wieloma wpisami tekstowymi & drop-downs, które przesyła za pośrednictwem GET. Chciałbym mieć czystszy adres URL wyszukiwania, usuwając puste pola z zapytania, gdy wykonywane jest wyszukiwanie.

var form = $("form"); 
var serializedFormStr = form.serialize(); 
// I'd like to remove inputs where value is '' or '.' here 
window.location.href = '/search?' + serializedFormStr 

Każdy pomysł, jak mogę to zrobić za pomocą jQuery?

Answer 1

Szukałem nad jQuery docs i myślę, że możemy to zrobić w jednej linii przy użyciu selectors:

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

Oczywiście #myForm pobiera element o identyfikatorze "myForm", ale to, co było mniej ob Początkowo zakładałem, że wymagany jest znak przestrzeni pomiędzy #myForm i: input, ponieważ jest to operator descendant.

:input dopasowuje wszystkie elementy wejściowe, tekstowe, elementy wyboru i przyciski.

[value!=''] jest atrybutem nie równym filtrem. Dziwne (i pomocne) jest to, że wszystkie: dane wejściowe typy elementów mają atrybuty wartości, a nawet zaznaczenia i pola wyboru itp.

Wreszcie, aby również usunąć wejścia, w których wartość była "." (Jak wspomniano w pytaniu):

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

W tym przypadku zestawienia, czyli placing two attribute selectors next to each other implikuje AND. Using a comma oznacza OR. Przepraszam, jeśli to oczywiste dla ludzi CSS!

Answer 2

Chciałbym spojrzeć na kod źródłowy dla jQuery. W najnowszej wersji wiersz 3287.

Mogę dodać funkcje "serialize2" i "serializeArray2". oczywiście nazwa ich coś znaczącego.

Lub lepszym sposobem byłoby napisanie czegoś, aby wyciągnąć nieużywane vars z serializedFormStr. Niektóre wyrażeń regularnych, które szukają = & w środku ciągu lub kończące się w = Jakieś kreacje z wyrażeniem regularnym w pobliżu?

UPDATE: Lubię odpowiedź rogeriopvl za lepsze (+1) ... zwłaszcza, że ​​nie mogę znaleźć żadnych dobrych narzędzi regex teraz.

Answer 3

Możesz zajrzeć do funkcji jquery .each(), która pozwala na iterację poprzez każdy element selektora, więc w ten sposób możesz sprawdzić każde pole wejściowe i sprawdzić, czy jest puste, czy nie, a następnie usunąć to z formularza przy użyciu elementu.remove(). Następnie możesz serializować formularz.

Answer 4

Można zrobić to z regex ...

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

przypadki testowe:

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

W coffeescript, to zrobić:

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

Answer 6

Użyłem powyżej rozwiązanie, ale dla mnie te nie działało.Tak Użyłem następujący kod

$('#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; 
     }); 

Może być przydatna dla kogoś

Answer 7

nie byłem w stanie uzyskać rozwiązanie Toma do pracy (?), Ale udało mi się to zrobić przy użyciu .filter() z krótkim funkcji do identyfikacji pustych pól. Używam jQuery 2.1.1.

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