Як використовувати jQuery's form.serialize, але виключати порожні поля

У мене є форма пошуку з кількома введеннями тексту та спадами, що надсилається через GET. Я хотів би мати більш чисту URL-адресу пошуку, видаляючи порожні поля з рядка запиту, коли виконується пошук.

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

Будь-яка ідея, як я можу це зробити за допомогою jQuery?

Я переглядав документи jQuery і думаю, що ми можемо це зробити в одному рядку за допомогою селекторів :

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

Очевидно, що #myForm отримує елемент з id "myForm", але те, що мені спочатку було менш очевидним, - це те, що потрібний пробільний символ між #myForm та: input, оскільки це оператор- нащадок .

: введення відповідає всім елементам введення, текстовій області, елементам вибору та кнопок.

[value! = ''] є атрибутом, не рівним фільтру. Дивна (і корисна) річ у тому, що все: введення типи елементів мають атрибути значення, навіть вибрані та прапорці тощо.

Нарешті, також видалити вхідні дані, де було значення "." (як зазначено у питанні):

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

У цьому випадку супозиція, тобто розміщення двох селекторів атрибутів поруч один з одним , означає І. Використання коми означає ІЛИ. Вибачте, якщо це очевидно для людей CSS!

Я не зміг заставити рішення Тома працювати (?), Але мені вдалося це зробити за .filter()допомогою короткої функції для визначення порожніх полів. Я використовую jQuery 2.1.1.

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

Це працює для мене:

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

Ви можете це зробити за допомогою регексу ...

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

Тестові приклади:

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

Я використав вище рішення, але для мене це не спрацювало. Тому я використав наступний код

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

Може бути корисним для когось

Я б подивився на вихідний код для jQuery. В останній версії рядка 3287.

Я можу додати функції "serialize2" та "serializeArray2". звичайно назвіть їх чимось підступним.

Або кращим способом було б написати щось, щоб витягнути невикористані вари з serializedFormStr. Який-небудь регулярний вираз, який шукає = & у середній рядку або закінчується = Будь-які майстри з регулярних виразів навколо?

ОНОВЛЕННЯ: Мені подобається відповідь rogeriopvl краще (+1) ... тим більше, що я не можу знайти жодного хорошого інструменту для регулярних виразів.

Альтернатива рішенню Річа :

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

Пояснення:

• .submit()зачепить на submitподію форми
• e.preventDefault() запобігає надсиланню форми
• .serializeArray() дає нам представлення масиву рядка запиту, який збирався відправити.
• .filter() видаляє помилкові (включаючи порожні) значення в цьому масиві.
• $.param(query) створює серіалізоване та супровідне URL-адреса нашого оновленого масиву
• встановлення значення для window.location.hrefнадсилання запиту

У coffeescript зробіть це:

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

Ви можете поглянути на функцію jquery .each (), яка дозволяє повторювати кожен елемент селектора, так що ви можете перейти перевірити кожне поле введення та побачити, чи воно порожнє чи ні, а потім видалити його з форми використовуючи element.remove (). Після цього можна серіалізувати форму.