Question

我有一个表单，每个公司产品都有大约一百个输入/文本字段。该表格将在当天结束时填写每件产品的编号。

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

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

由于

Answer 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)" ...>

所以任何输入值为＆＃34;＆＃34; （空字符串）将禁用属性设置为 true ，并且不会提交。

或者动态添加侦听器：

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

Answer 2

这就是我在网站上拥有的内容：

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

    return true;
});

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

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

Here is the JSFiddle of the code

Answer 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>

JS

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

如何不以HTML格式传递空输入字段

4 个答案: