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

时间:2009-03-03 23:50:07

标签: javascript jquery forms serialization input

我有一个带有大量文字输入的搜索表单&通过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做到这一点?

9 个答案:

答案 0 :(得分:158)

我一直在查看jQuery docs,我认为我们可以使用selectors在一行中执行此操作:

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

显然#myForm获取id为“myForm”的元素,但最初对我来说不太明显的是#myForm和:input之间需要空格字符,因为它是{{3运营商。

descendant匹配所有input,textarea,select和button元素。

:input是一个不等于过滤器的属性。奇怪的(也是有用的)是 all:input 元素类型具有值属性,甚至是选择和复选框等。

最后还删除值为'。'的输入。 (如问题中所述):

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

在这种情况下,并置,即[value!=''],意味着AND。 placing two attribute selectors next to each other表示OR。对不起,如果这对CSS人员来说很明显!

答案 1 :(得分:46)

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

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

答案 2 :(得分:11)

这对我有用:

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

答案 3 :(得分:7)

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

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

答案 4 :(得分: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;
        });

可能对某人有用

答案 5 :(得分:1)

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

我可能会添加“serialize2”和“serializeArray2”函数。 当然把它们命名为meaniful。

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

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

答案 6 :(得分:0)

在coffeescript中,请执行以下操作:

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

答案 7 :(得分:0)

https://github.com/Breeze/northwind-core-ng-demo的替代方法:

# save an array of first row from sample data of shape(1, 400)
xA = np.array([X[0, :]])

# try to assign both tA of shape(20,) and tB of shape(20,)
# a reshaped version of xA (20x20 = 400)
d_array [tA, tB] = np.reshape(xA, (20, 20))

说明:

  • $('#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()创建更新后的数组的序列化且符合URL的表示形式
  • 将值设置为$.param(query)发送请求

答案 8 :(得分:-1)

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