我如何使用jQuery的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之间需要空格字符，因为它是后代运算符。

：input匹配所有输入，文本区域，选择和按钮元素。

[value！='']是一个属性不等于过滤器。奇怪的是（有用的）事情是：所有：input元素类型都具有value属性，甚至select和checkbox等。

最后，还要删除值为“。”的输入。（如问题中所述）：

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

在这种情况下，并置（即，两个属性选择器彼此相邻放置）表示AND。使用逗号表示“或”。抱歉，如果这对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

我已经使用了上述解决方案，但是对我来说这些没有用。所以我用下面的代码

$('#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”函数。当然给他们起一个有意义的名字。

或更好的方法是编写一些东西以将未使用的var从serializedFormStr中拉出。一些正则表达式在中间字符串中查找=＆或以=结尾，附近是否存在任何正则表达式向导？

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

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) 创建更新后的数组的序列化且符合URL的表示形式
• 设置一个值以window.location.href发送请求

在coffeescript中，执行以下操作：

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

您可能想看一下.each（）jQuery函数，该函数允许您遍历选择器的每个元素，因此您可以通过这种方式检查每个输入字段，查看是否为空，然后将其从表单中删除。使用element.remove（）。之后，您可以序列化表格。