我如何使用 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 文档，我认为我们可以使用选择器在一行中完成此操作：

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

很明显，#myForm 获取了 id 为 "myForm" 的元素，但起初对我来说不太明显的是 #myForm 和 :input 之间需要空格字符，因为它是后代运算符。

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

[value!='']是一个属性不等于过滤器。 奇怪（且有用）的事情是所有 :input元素类型都具有值属性，甚至选择和复选框等。

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

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

在这种情况下，并列，即将两个属性选择器并排放置，意味着 AND。 使用逗号意味着 OR。 对不起，如果这对 CSS 人员来说很明显！

Answer 2

我无法让 Tom 的解决方案起作用（？），但我能够使用.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

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发送请求

Answer 7

我会查看 jQuery 的源代码。 在最新版本的第 3287 行。

我可能会添加“serialize2”和“serializeArray2”函数。 当然，给它们命名一些有意义的东西。

或者更好的方法是编写一些东西来从 serializedFormStr 中提取未使用的变量。 一些在字符串中间查找 =& 或以 = 结尾的正则表达式 周围有任何正则表达式向导吗？

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

Answer 8

在咖啡脚本中，执行以下操作：

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

Answer 9

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