У меня есть форма поиска с количеством текстовых входов и выпадающих списков, которые отправляются через 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 docs, и я думаю, что мы можем сделать это в одной строке, используя selectors:
$("#myForm :input[value!='']").serialize() // does the job!
Очевидно, что #myForm получает элемент с идентификатором "myForm", но для меня было менее очевидно, что для символа пробела требуется между #myForm и: input, поскольку это descendant.
: ввод соответствует всем элементам ввода, textarea, select и button.
[value!= ''] - это атрибут, не равный фильтру. Странная (и полезная) вещь состоит в том, что типы все: input имеют атрибуты значений, даже выбирающие и флажки и т.д.
Наконец, чтобы удалить входы, где значение было "." (как упоминалось в вопросе):
$("#myForm :input[value!=''][value!='.']").serialize()
В этом случае сопоставление, т.е. размещение двух селекторов атрибутов рядом друг с другом, подразумевает AND. Использование запятой подразумевает OR. Извините, если это очевидно для людей CSS!
Мне не удалось заставить решение Tom работать (?), но я смог сделать это с помощью .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
Я бы посмотрел исходный код jQuery. В последней версии строки 3287.
Я мог бы добавить функции "serialize2" и "serializeArray2". конечно, назовите их чем-то скучным.
Или лучший способ - написать что-нибудь, чтобы вытащить неиспользуемые vars из serializedFormStr. Некоторое регулярное выражение, которое ищет = & в середине строки или в конце = Любые мастера регулярных выражений?
UPDATE: Мне нравится rogeriopvl ответить лучше (+1)... тем более, что я не могу найти никаких хороших инструментов регулярного выражения прямо сейчас.
Я использовал вышеупомянутое решение, но для меня это не сработало. Поэтому я использовал следующий код
$('#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;
});
Может быть полезным для кого-то
В coffeescript сделайте следующее:
serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()
Возможно, вы захотите посмотреть на функцию .each() jquery, которая позволяет выполнять итерацию по каждому элементу селектора, так что вы можете проверить каждое поле ввода и посмотреть, пуст ли он или нет, а затем удалить его из формы с помощью element.remove(). После этого вы можете сериализовать форму.