如何在HTML表单中避免传递空输入字段

Question

如何在HTML表单中避免传递空输入字段

javascripthtmlformsfilter

9

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

如何让表单仅传递相对较小的子集字段，而这些字段不为空？

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

谢谢

- jasdak

5

你可以分享一下你已经开始的内容吗？ - Yaje

你正在使用.serializearray()或简单的jQuery获取所有值吗？如果你使用.serializearray()，那么我有一个解决方案。 - Keval Bhatt

我发现在类似问题中这个答案最有用（设置禁用可行但视觉上会混淆，删除名称属性具有相同的效果但不会改变页面外观）https://dev59.com/jIzda4cB1Zd3GeqPtPEg#31376894 - nonagon

4个回答

3

这是我使用 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属性定义的页面
显示表单提交的消息。

这里是代码的JSFiddle链接

- Ahs N

2

重写默认的POST行为而不是禁用UI字段，这可能会产生对用户可感知的视觉噪音。 - Alan Evangelista

1

这是我在一个网站上的确切内容：

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

    return true;
});

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

- Christoffer Karlsson

0

这里是使用 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>

JS

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

- Shouvik

通常认为，提交一个需要使用未在标签中注明或问题中要求的库，并且您没有说明需要该库的答案是非常不好的做法（有许多使用"$"函数的库）。特别是当非库解决方案非常简单且更有效时。 - RobG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RobG · Accepted Answer

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

提交前，将所有空字段设置为禁用的一种方式，例如：

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