Как мне использовать jQuery form.serialize, но исключить пустые поля
-
03-07-2019 - |
Вопрос
У меня есть форма поиска с несколькими текстовыми вводами и выпадающими списками, которая отправляется через 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 получает элемент с идентификатором "myForm", но что поначалу было для меня менее очевидным, так это то, что символ пробела необходим между #myForm и :input, поскольку это потомок оператор.
:входные данные соответствует всем элементам ввода, текстовой области, выбора и кнопки.
[значение!="] является атрибутом, не равным filter.Странная (и полезная) вещь заключается в том, что все:входные данные типы элементов имеют атрибуты значений, даже selects, флажки и т.д.
Наконец, также удалить входные данные, где значение было '.' (как упоминалось в вопросе):
$("#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.Какое-нибудь регулярное выражение, которое ищет =& в середине строки или заканчивается на = Есть какие-нибудь мастера регулярных выражений?
Обновить: Мне больше нравится ответ роджериопвла (+1)...тем более, что прямо сейчас я не могу найти никаких хороших инструментов для регулярных выражений.
В coffeescript сделайте это:
serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()
Возможно, вы захотите взглянуть на функцию jquery .each(), которая позволяет вам перебирать каждый элемент селектора, так что таким образом вы можете проверить каждое поле ввода и посмотреть, пустое оно или нет, а затем удалить его из формы с помощью element.remove() .После этого вы можете сериализовать форму.