删除提交

Question

我有一个页面，上面有一组表格，用于API测试。由于不值得解释的原因，我通常不希望在提交到服务器的过程中包含空字段。如何在提交之前从数据中删除空字段？

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

我的第一个尝试是使用jquery和

循环遍历字段

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

删除该字段。但是a）没有用，并且b）似乎它会从页面上的可见形式中删除该字段，这不是我想要的。

另一种方法可能是遍历字段并手动构造提交字符串，其字段的值不是“”。那会有用吗？有更好的想法吗？

Answer 1

一种方法是在这些字段上设置“disabled”属性，这样可以防止它们的值被序列化并发送到服务器：

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

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

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

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

编辑：修复了错误

Answer 2

将答案与this question regarding finding empty input结合起来，我得出了这个解决方案。

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

首先从@Luke的解决方案开始，添加了他使用find代替孩子的建议（我的表格在表格中），然后使用@ gdoron的过滤技术来隔离空元素。

Answer 3

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

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

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

＆＃13;

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

＆＃13;

Answer 5

也许不是最好的解决方案，但这应该是一种快速简便的方法来实现你的目标

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

Answer 6

删除提交

上的空字段

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

结合多种功能和主观风格，尤其是：

.find()转移deeper而不是.children()。
.val() === ''适用于textarea和changed属性，[value=""]则不适用。
.prop() over .attr()。

Answer 7

加入卢克丹尼斯接受了答案。如果有人使用 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);
            }
        });
    });
});

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

7 个答案:

删除提交