jquery：如何在提交之前从表单中删除空白字段？

Question

我有一个页面，上面有一组表单，用于 API 测试。由于不值得解释的原因，我通常不想在向服务器提交的内容中包含空字段。提交前如何删除数据中的空白字段？

例如，如果我有一个包含两个字段（foo 和 bar）的表单，并且用户将 bar 留空，我希望服务器看到提交，就好像唯一的字段是 foo 一样。

我的第一次尝试涉及使用 jquery 循环遍历字段

$("form").submit(function() {
    $(this).children(':input').each(...)
}

并删除字段。但a）不起作用，b）似乎会从页面上的可见表单中删除该字段，这不是我想要的。

另一种方法可能是循环遍历字段并使用具有除“”之外的值的字段手动构造提交字符串。那行得通吗？还有更好的想法吗？

Answer 1

一种方法是在这些字段上设置“禁用”属性，这会阻止它们的值被序列化并发送到服务器：

$(function()
{
    $("form").submit(function()
    {
        $(this).children(':input[value=""]').attr("disabled", "disabled");

        return true; // ensure form still submits
    });
});

如果您有客户端验证，您还需要在事件中重新启用这些字段验证失败：

$(':input').removeAttr("disabled");

编辑：修复了错误

Answer 2

将此处的答案与有关查找空输入的问题结合起来我得出了这个解决方案。

$(function() {
   $("form").submit(function() {
      $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
      return true; // ensure form still submits
    });
});

因此，从 @Luke 的解决方案开始，添加他使用 find 而不是 child 的建议（我的表单位于表格中），然后使用 @gdoron 的过滤技术来隔离空元素。

Answer 3

我通常会同意@Luke，但下面的解决方案应该处理任何空值，无论它是否是输入标签，只要记住在所有表单子元素上添加名称属性（如果您希望它们被序列化） ;

HTML：

<form action="yourUrl.php" name="myForm" id="myForm">
input1: <input type="text" name="field1" /><br /><br />
input2: <input type="text" name="field2" /><br /><br />
input3: <input type="text" name="field3" /><br /><br />
input4: <input type="text" name="field4" /><br /><br />
select: <select name="selectField">
    <option value="">empty value</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
</select><br /><br />
<input type="submit" name="submit" value="submit" />
</form>    

jQuery：

$("#myForm").submit (function (e) {
    e.preventDefault();
    var _form = $(this);
    var data = {};
    var formData = _form.serializeArray();
    $.each(formData, function (index, value) {
        var data_name = formData[index].name;
        var data_value = formData[index].value;
        if (data_value !== "") {
            data[data_name] = data_value;
        }
    });
    // now with ajax you can send the sanitize data object
    $.post(_form.attr("action"), data, function(res, textStatus, jqXHR) {
        // do something
    });
});

Answer 4

投票最高的答案对我不起作用。我认为选择器不够具体。这对我有用：

$(function() {
  $("#myForm").submit(function() {
    $("#myForm *").filter(":input").each(function(){
      if ($(this).val() == '')
        $(this).prop("disabled", true);
    });

    return true; // ensure form still submits
  });
});

Answer 5

删除提交时的空字段

$(function() {
    $('form').submit(function () {
        var $empty_fields = $(this).find(':input').filter(function () { 
            return $(this).val() === '';
        });
        $empty_fields.prop('disabled', true);
        return true;
    });
});

结合多个功能和主观样式，特别是：

• .find() 变为比.children()更深。
• .val() === '' 适用于 textarea 和 更改了属性，[value=""]没有。
• .prop() 超过 .attr()。

Answer 6

添加卢克·丹尼斯接受的答案。如果有人使用 Python/Django 框架，如果您使用 django-filters 应用程序，此脚本可能会有所帮助。在此示例中，我有多个具有输入和选择器 html 元素的过滤器。但是，该脚本也适用于单输入过滤器和多选过滤器。

$(function()
{
    var form = $( 'form' )[0];
    $( form ).submit(function() 
    { 
        $('input, select').each(function()
        {
            if ($(this).val().length === 0) 
            {
                $(this).prop('disabled', true);
                $(this).next().prop('disabled', true);
            }
        });
    });
});

Answer 7

也许不是最好的解决方案，但这应该是实现您想要的目标的快速而简单的方法然后

$("form").submit(function() {
    $(this).children('input[value=""]').each(function(){
        // Rename the name attribute to something else if the value is "" to it isn't submitted
        $(this).attr('blank', $(this).attr('name'));
        $(this).removeAttr('name');

    });
}

，如果您使用 vlient 端验证或通过 ajax 发布，那么您需要将 name 属性设置回来，以便下一次提交可以工作正确地...

$(this).attr('name', $(this).attr('blank'));
$(this).removeAttr('blank');