如何使用 jQuery 的 form.Series 但排除空字段

我有一个通过 GET 提交的搜索表单，其中包含大量的文本输入和下拉列表。我想有一个更干净的搜索网址通过删除查询字符串中的空字段时，执行搜索。

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

知道我如何使用 jQuery 实现这一点吗？

93986 次浏览
小开

我将查看 jQuery 的源代码。 In the latest version line 3287.

我可以添加一个“ Series alize2”和“ Series alizeArray2”函数。 of course name them something meaniful.

或者，更好的方法是编写一些代码，将未使用的 var 从 seralizedFormStr 中提取出来。一些在中间字符串中查找 = & 或以 = 结尾的正则表达式 Any regex wizards around?

更新: 我更喜欢 rogeriopvl 的答案(+ 1) ... ... 特别是因为我现在找不到任何好的正则表达式工具。

小开

你可能想看看。Each () jquery 函数，它允许您遍历选择器的每个元素，这样您就可以检查每个输入字段，看看它是否为空，然后使用 element.move ()从表单中删除它。然后可以序列化窗体。

小开

你可以用正则表达式..。

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
小开
最佳答案

I've been looking over the JQuery 文档 and I think we can do this in one line using 选择器:

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

显然，# myForm 获取的元素 id 为“ myForm”，但是最初对我来说不那么明显的是，在 # myForm 和: input 之间需要 空间角色，因为它是 后代操作符。

Input 匹配所有输入、 textarea、 select 和按钮元素。

[价值！=”] 是一个属性不等于 filter。奇怪(而且有帮助)的是，输入元素类型有值属性，甚至有选择和复选框等。

最后还要删除值为“ .”的输入(如问题中提到的) :

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

在这种情况下，并列，即 把两个属性选择器放在一起，意味着一个 AND。 用逗号意味着一个 OR。对不起，如果这是显而易见的 CSS 人！

小开

In coffeescript, do this:

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

我已经使用上述解决方案，但对我来说，这些都没有工作。所以我使用以下代码

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

可能对某人有用

小开

我无法使汤姆的解决方案奏效(?)，但是我能够使用 .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();
小开

Rich 的解决办法的替代品:

$('#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) creates a serialized and URL-compliant representation of our updated array
  • 设置值为 window.location.href发送请求

提交答案