111

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

4

9 回答 9

176

我一直在查看jQuery 文档，我认为我们可以使用选择器在一行中做到这一点：

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

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

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

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

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

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

在这种情况下，并列，即将两个属性选择器彼此相邻放置，意味着 AND。使用逗号意味着 OR。对不起，如果这对 CSS 人来说是显而易见的！

于 2009-03-04T14:29:48.103 回答
62

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

var formData = $("#formid :input")
    .filter(function(index, element) {
        return $(element).val() != '';
    })
    .serialize();
于 2015-02-13T15:50:32.417 回答
11

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

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
于 2009-03-04T07:55:36.630 回答
11

这对我有用：

data = $( "#my_form input").filter(function () {
        return !!this.value;
    }).serialize();
于 2015-05-12T12:39:58.127 回答
3

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

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

可能对某人有用

于 2014-02-15T06:34:33.593 回答
2

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发送请求
于 2019-10-30T19:35:40.313 回答
1

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

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

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

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

于 2009-03-04T00:00:40.487 回答
0

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

serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()
于 2013-07-28T06:47:51.697 回答
-1

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

于 2009-03-04T00:07:34.057 回答