Question

在此表单中，用户可以为作者（音乐，歌词作者）添加一些信息

用户可以选择添加1个或更多作者。

问题是，当用户只输入1位作者时，所有其他输入仍然为空，但jQuery序列化函数会将它们放在URL中，服务器会给我这个错误：

Request-URI Too Large

见下面的例子：

echo "<form action=\"\" id=\"submForm\" name=\"submForm\" method=\"get\">";
// AUTHOR NUMBER 1
echo "<p><span class=\"labelInput\">".(_t('_cR_name'))." </span><input id=\"nameAuthor\" name=\"author[0][name]\" value=\"\" type=\"text\" class=\"commonInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOB'))." </span><input id=\"DOBAuthor\" name=\"author[0][DOB]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOD'))." </span><input id=\"DODAuthor\" name=\"author[0][DOD]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
// AUTHOR NUMBER 2
echo "<p><span class=\"labelInput\">".(_t('_cR_name'))." </span><input id=\"nameAuthor\" name=\"author[1][name]\" value=\"\" type=\"text\" class=\"commonInput\"></p>";
echo "<p><span class=\"labelInput\">".(_t('_cR_DOB'))." </span><input id=\"DOBAuthor\" name=\"author[1][DOB]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOD'))." </span><input id=\"DODAuthor\" name=\"author[1][DOD]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; Death:
// AUTHOR NUMBER 3
echo "<p><span class=\"labelInput\">".(_t('_cR_name'))." </span><input id=\"nameAuthor\" name=\"author[2][name]\" value=\"\" type=\"text\" class=\"commonInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOB'))." </span><input id=\"DOBAuthor\" name=\"author[2][DOB]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
echo "<p><span class=\"labelInput\">".(_t('_cR_DOD'))." </span><input id=\"DODAuthor\" name=\"author[2][DOD]\" value=\"\" type=\"text\" class=\"littleInput\"></p>"; 
echo "</form>";

这是jQuery代码（它还包含一个验证函数，我在jQuery 1.3.2上）

echo "<script type=\"text/javascript\">
$(document).ready(function() {
 $('#submForm').validate({   
  submitHandler: function(form) {
  var serialized = $('#submForm').serialize()
  $.get('".$site['url']."modules/yobilab/copyright/classes/DO_submission.php', serialized);
    window.setTimeout('location.reload()', 8000);
return false;
  form.submit();    
  } 
})
});

现在假设用户只输入AUTHOR 1的字段，并将AUTHOR 2和AUTHOR 3留空。我怎么说jQuery序列化函数只包含在URL中的输入字段，并且根本不包括空字段？

Answer 1

我刚遇到同样的问题，但形式却截然不同。我不喜欢这里的几个答案如何删除表单元素，您可以在表单提交之前看到页面上删除的元素。其他人克隆了表格，其中一个表格没有为我返回任何结果。

所以我最终得到了这个：

$('#submForm').find('input').not('[value=""]').serialize();

就我而言，上面的代码适用于我选择的菜单以及输入字段。

这正是我使用的：

$('#search').find('input, select').not('[value=""], [value="0"], [value="DESC"]').serialize();

因此它只提取具有数据而不是任何默认值的表单字段。我很想知道这是否可以进一步优化。

Answer 2

我正在使用的是什么

$("form").serialize().replace(/[^&]+=&/g, '').replace(/&[^&]+=$/g, '')

Answer 3

您可以使用过滤器以及可以在任何jQuery对象上调用序列化的事实（此示例仅用于显示您只能序列化非空元素并且仅包含来自的<input>元素形式）：

var serialized = $('#submForm').filter(function(){
                    return $(this).val();
                }).serialize();

这是一个working example - 将一个或多个文本框留空并单击按钮;您将看到序列化字符串更改为仅包含非空文本框。

Answer 4

由于value属性包含默认值，而不是实际值，我考虑使用它：

var queryString = $('form input').map(function () {
        return $(this).val().trim() == "" ? null : this;
    }).serialize();

优点：

修剪实际值，因此空格/制表不会被视为真实，
它不会修改DOM元素，因此如果失败，它仍然可以重复使用。

Answer 5

尝试添加此

$('input', '#submForm').each(function(){
    $(this).val() == "" && $(this).remove();
})

OR

$('input:text[value=""]', '#submForm').remove();

前

var serialized = $('#submForm').serialize()

Answer 6

首先检查字段是否为空。这些成功的推动阵列。您可以序列化元素数组。

Answer 7

这应该适用于你想要做的事情：

$(document).ready(function() {
    $('#submForm').validate({ 
        submitHandler: function(form) {
            // Do cleanup first
            $('#submForm>input').each(function(){
                if($(this).val() == "") { $(this).remove(); }
            });
            var serialized = $('#submForm').serialize();
            $.get('".$site['url']."modules/yobilab/copyright/classes/DO_submission.php', serialized);
            window.setTimeout('location.reload()', 8000);
            return false;
            form.submit(); 
        }
    })
});

修改...
我真的认为Mark Koopman的解决方案是最简单的选择。你有什么理由不能使用POST代替GET吗？

编辑2 ...
哎呀，我完全错过了amit_g发布了同样的解决方案。但我希望至少在上下文中看到它仍然有用。

Answer 8

我只需要做同样的事情，所以我写了一个小插件，只是在序列化之前禁用空输入：

(function($) {
  $.fn.serialize_without_blank = function () {
    var $form = this,
      result,
      $disabled = $([]);

    $form.find(':input').each(function () {
      var $this = $(this);
      if ($.trim($this.val()) === '' && !$this.is(':disabled')) {
        $disabled.add($this);
        $this.attr('disabled', true);
      }
    });

    result = $form.serialize();

    $disabled.removeAttr('disabled');

    return result;
  };
}(jQuery));

像这样使用：

$.ajax({
  url: $form.attr('action'),
  type: $form.attr('method'),
  data: $form.serialize_without_blank();
});

Answer 9

Dr.Molle解决方案有效但如果缺少value属性，那么这就是解决方案： -

$(form).clone().find("input").each(function() {
    if ($.trim($(this).val()) === '') {
        $(this).remove();
    }
}).end().serialize();

Answer 10

var serializedData = $('.register-form').serializeArray();
var clear = {};
$.each(serializedData , function(i,data) {                                       
if(data.value!=='' && clear[data.name]==undefined) clear[i] = data;                                      
                                    });

Answer 11

这就是我做的事情

var form = $('form');
var form_input = form.serialize().replace(/[^=&]+=(&|$)/g,"").replace(/&$/,"");

jQuery序列化如何消除空字段

11 个答案: