Как использовать jQuery form.serialize, но исключить пустые поля

Question

У меня есть форма поиска с множеством текстовых входов и выпадающих меню, которая отправляется через 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?

Answer 1

Я просматривал jQuery docs , и я думаю, что мы можем сделать это в одну строку, используя селекторы :

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

Очевидно, что #myForm получает элемент с идентификатором "myForm", но для меня сначала было менее очевидно, что пробел необходим между #myForm и: input, поскольку он является потомком . оператор.

: ввод соответствует всем элементам input, textarea, select и button.

[значение! = ''] является атрибутом, не равным фильтру. Странная (и полезная) вещь в том, что all: input типы элементов имеют атрибуты значения, даже выбирает и устанавливает флажки и т. Д.

Наконец, также удалить входные данные, где значение было «.» (как указано в вопросе):

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

В этом случае сопоставление, то есть , помещающее два селектора атрибута рядом друг с другом , подразумевает AND. Использование запятой подразумевает ИЛИ. Извините, если это очевидно для CSS-людей!

Answer 2

Я не смог заставить работать решение Тома (?), Но я смог сделать это, используя .filter() с короткой функцией для определения пустых полей. Я использую jQuery 2.1.1.

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

Answer 3

Это работает для меня:

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

Answer 4

Вы можете сделать это с помощью регулярного выражения ...

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

Answer 5

Я использовал вышеуказанное решение, но у меня это не сработало. Поэтому я использовал следующий код

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

Может быть кому-то пригодится

Answer 6

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

Я мог бы добавить в функции "serialize2" и "serializeArray2". конечно, назови их чем-нибудь неважным.

Или лучше было бы написать что-нибудь, чтобы вытащить неиспользуемые переменные из serializedFormStr. Некоторое регулярное выражение, которое ищет = & в середине строки или заканчивается на = Есть ли какие-нибудь волшебники регулярных выражений?

UPDATE: Мне больше нравится ответ rogeriopvl (+1) ... тем более что сейчас я не могу найти хороших инструментов для регулярных выражений.

Answer 7

В coffeescript сделайте это:

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

Answer 8

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