如何不通过HTML表单中的空输入字段

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

使有“”（空字符串）值的任何输入都会有其禁用属性设置为真和它不会被提交。

或添加动态监听器：

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方法将表单提交给由所述形式的动作属性中定义的页面
• 显示表单提交的消息。

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