我如何使用jQuery的form.serialize但排除空字段
-
03-07-2019 - |
题
我有一个带有大量文字输入的搜索表单&通过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做到这一点?
解决方案
我一直在查看 jQuery docs ,我想我们可以在一行中使用< a href =“http://docs.jquery.com/Selectors"rel =”noreferrer“>选择器:
$("#myForm :input[value!='']").serialize() // does the job!
显然,#myForm获取id为“myForm”的元素。但一开始不太明显的是,#myForm和:input之间需要空格字符,因为它是后代操作员。
:输入 匹配所有输入,textarea,选择和按钮元件。
[value!=''] 属性不是等过滤器。奇怪的(也是有用的)是 all:input 元素类型具有值属性,甚至是选择和复选框等。
最后还删除值为'。'的输入。 (如问题中所述):
$("#myForm :input[value!=''][value!='.']").serialize()
在这种情况下,并置,即将两个属性选择器彼此相邻放置,意味着AND 。 使用逗号表示OR。对不起,如果这对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”功能。 当然把它们命名为meaniful。
或者更好的方法是写一些东西将未使用的变量从serializedFormStr中拉出来。一些寻找=&amp;的正则表达式在中间字符串或以=结尾 有任何正则表达式向导吗?
更新: 我更喜欢rogeriopvl的答案(+1)...特别是因为我现在找不到任何好的正则表达式工具。
在coffeescript中,请执行以下操作:
serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()
您可能希望查看.each()jquery函数,它允许您遍历选择器的每个元素,这样您就可以检查每个输入字段并查看它是否为空,然后将其删除从使用element.remove()的表单。之后,您可以序列化表单。