如何不在 HTML 表单中传递空输入字段答案

【问题标题】：How to not pass empty input fields in HTML form如何不在 HTML 表单中传递空输入字段
【发布时间】：2015-07-13 15:05:31
【问题描述】：

我有一个表单，其中包含我们公司每个产品的大约一百个输入/文本字段。表格将在一天结束时填写每件售出产品的数量。

如何让表单只传递相对较小的非空字段子集？

我不是在寻找表单验证。用户可以在任何输入字段中输入或不输入值；但是，我只希望将确实输入了值的输入字段包含在表单传递的 POST 中。

谢谢

【问题讨论】：

你能分享你已经开始的事情吗？
您正在使用 .serializearray() 或简单的 jquery 来获取所有值？如果你使用 .serializearray() 那么我有一个解决方案。
我在一个类似的问题中发现这个答案最有用（设置禁用有效但视觉上令人困惑，删除 name 属性具有相同的效果但不会改变页面的外观）@987654321 @

标签： javascript html forms filter

【解决方案1】：

一种方法是在提交之前将所有空字段设置为禁用，例如

function disableEmptyInputs(form) {
  var controls = form.elements;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    controls[i].disabled = controls[i].value == '';
  }
}

并在表单的提交监听器上运行它：

<form onsubmit="disableEmptyInputs(this)" ...>

因此，任何值为 ""（空字符串）的输入都将其 disabled 属性设置为 true，并且不会被提交。

或者动态添加监听器：

window.onload = function() {
  document.getElementById('formID').addEventListener('submit', function() {
    Array.prototype.forEach.call(this.elements, function(el) {
      el.disabled = el.value == '';
    });
  }, false);
};

【讨论】：

我知道这是一个非常古老的答案，但是对于仍然看到这个的任何人来说，这个答案将意味着如果控件具有非空值，则启用它们，即使它们以前被禁用出于另一个原因。 这并不总是您想要的，但可以通过将 for 循环主体安排为 if (controls[i].value == '') controls[i].disabled = true 来轻松调整。
在 Firefox v77 上单击后退按钮时会破坏表单。

【解决方案2】：

这是我使用 JQuery 所做的：

$("#myform").submit(function (event) {
    event.preventDefault();
    var dataArr = {};

    $.each($("form > input[name]"), function (key, value) {
        if ($(this).val() != "") {
            dataArr[$(this).attr('name')] = $(this).val();
        }
    });

    $.post($(this).attr('action'), dataArr);
    alert("Form submitted!");

});

上面的代码做了什么：

停止默认表单提交
查找所有包含数据的输入字段
构建有效数据的数组
通过POST方法将表单提交到表单的action属性定义的页面
显示表单提交的消息。

Here is the JSFiddle of the code

【讨论】：

+1 用于覆盖默认 POST 行为而不是禁用 UI 字段，这可能会产生用户可察觉的视觉噪音

【解决方案3】：

这正是我在网站上所拥有的：

$("#my-form").submit(function() {
    $(this).find(":input").filter(function () {
        return !this.value;
    }).attr("disabled", true);

    return true;
});

它将禁用表单中没有任何值的所有输入字段，从而使它们不会在请求中发送。

【讨论】：

【解决方案4】：

这是一个使用 JQuery 的解决方案

HTML

<form id="myForm">
    <input name="1" type="text" / >
    <input name="2" type="text" / >
    <input name="3" type="text" / >
    <input name="4" type="text" / >
    <button id="sub">Submit</button>
</form>

(function(){    
    $('#sub').click(function(e){
    e.preventDefault();
    var data = $('form input').filter(function(index,ele){
        return $(ele).val()!= '';
    }).serialize();
    console.log(data)
 })
})()

【讨论】：

提交一个需要标签中未注明或在问题中要求且您没有说是必需的库的答案通常被认为是非常糟糕的形式（有很多库使用“$”函数）。特别是当非库解决方案非常简单且效率更高时。