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

Posted 2023-02-22

【中文标题】如何使用 jQuery 的 form.serialize 但排除空字段

【英文标题】：How do I use jQuery's form.serialize but exclude empty fields

【发布时间】：2010-10-11 03:48:51

【问题描述】：

我有一个包含许多文本输入和下拉列表的搜索表单，通过 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 做到这一点吗？

【参考方案1】：

我一直在查看jQuery docs，我认为我们可以使用selectors 在一行中完成此操作：

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

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

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

[value!=''] 是一个属性不等于过滤器。奇怪（而且很有帮助）的是 all :input 元素类型甚至具有选择和复选框等值属性。

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

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

在这种情况下，并列，即placing two attribute selectors next to each other，意味着一个AND。 Using a comma 表示 OR。对不起，如果这对 CSS 人来说很明显！

【讨论】：

@Mvision，那是因为这个答案有一个小而重要的遗漏。对于 jQuery 1.8 和更早版本中的普通/纯 CSS 选择器，[value] 匹配具有属性 value present 的任何元素，包括那些具有空值（或没有）值的元素.这是由于早期 jQuery 版本中的一个错误导致 input[value] 和 :input[value] 的某些变体之间的不一致。以<input value="foo"><input value=""><input value><input>为例；该错误在this fiddle 中进行了说明。

对我来说，这很有效：$form.find(":input[value]") - 未选择空字段。这不起作用：$form.find(":input[value!='']") - 已选择所有字段。希望对某人有所帮助。 (jQuery 2.0.0)

$form.find(":input[value]") 也为我工作（jQuery 1.11.0）

仅当value 属性已经存在时才有效。否则它无法识别。

在某些情况下，value 以编程方式设置，这将不起作用（value 不会作为 html 属性存在，而是作为输入的数据属性存在）。在这些情况下，试试这个：$('#myForm :input').filter(function(i) return ($(this).val().length != 0); ).serialize()。编辑：刚刚看到里奇对同样效果的回答。

【参考方案2】：

我无法让 Tom 的解决方案发挥作用 (?)，但我能够使用 .filter() 和一个简短的函数来识别空字段。我正在使用 jQuery 2.1.1。

var formData = $("#formid :input")
    .filter(function(index, element) 
        return $(element).val() != '';
    )
    .serialize();

【讨论】：

无法获得批准的工作答案，但这很好用！谢谢！

回答我自己的问题：“:input 选择器基本上选择了所有表单控件。选择所有输入、文本区域、选择和按钮元素。” source

是的，Tom's is broken。你的也比我在那个小提琴中的尝试更干净。向上

【参考方案3】：

你可以用正则表达式来做...

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

【讨论】：

.replace(/[^&]+=\.?(&|$)/g, '') 涵盖了这两种情况。但我会添加 .replace(/&$/, '') 来删除尾随 &

没有正则表达式不能变坏的问题。

【参考方案4】：

这对我有用：

data = $( "#my_form input").filter(function () 
        return !!this.value;
    ).serialize();

【讨论】：

嗯，回调是让传递值返回 true，!! 重新输入任何布尔值，您可以在控制台中尝试。 !!('test'), !!(5), !!(0)

而不是input选择器，应该有:input来包含选择等

我建议更改：data = $( "#my_form :input").filter(function () return $(this).val() != ""; ).serialize();

【参考方案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;
        );

可能对某人有用

【参考方案6】：

Rich's solution 的替代方案：

$('#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 发送请求

【参考方案7】：

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

我可能会添加一个“serialize2”和“serializeArray2”函数。 当然给他们起个有意义的名字。

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

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

【参考方案8】：

在咖啡脚本中，这样做：

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

【参考方案9】：

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

【讨论】：

唯一的问题是用户会在页面提交之前看到控件中的空白消失。最好将名称设置为“”，以便序列化忽略它。