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

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");

编辑:修复了bug

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代替孩子的建议(我的表格在表格中),然后使用@ 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
    });
});