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

我有一个页面，上面有一组表格，用于API测试。 由于不值得解释的原因，我通常不希望在提交到服务器的过程中包含空字段。 如何在提交前从数据中删除空字段？

例如，如果我有一个包含两个字段foo和bar的表单，并且用户将栏留空，我希望服务器看到提交，就好像唯一的字段是foo一样。

我第一次尝试使用jquery循环遍历字段

$("form").submit(function() { $(this).children(':input').each(...) } 

并删除该字段。 但是a）不起作用，并且b）似乎它会从页面上的可见forms中删除该字段，这不是我想要的。

另一种方法可能是循环遍历字段并使用值不是“”的字段手动构造提交字符串。 那会有用吗？ 还有更好的想法？

Answer 1

一种方法是在这些字段上设置“disabled”属性，这样可以防止它们的值被序列化并发送到服务器：

 $(function() { $("form").submit(function() { $(this).children(':input[value=""]').attr("disabled", "disabled"); return true; // ensure form still submits }); }); 

如果您有客户端validation，则还需要在validation失败时重新启用这些字段：

 $(':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：

 
 input1: 

 input2: 

 input3: 

 input4: 

 select:  empty value option2 option3 

   

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

Answer 4

最高投票的答案对我不起作用。 我认为选择者不够具体。 这对我有用：

 $(function() { $("#myForm").submit(function() { $("#myForm *").filter(":input").each(function(){ if ($(this).val() == '') $(this).prop("disabled", true); }); return true; // ensure form still submits }); }); 

Answer 5

也许不是最好的解决方案，但这应该是一种快速简便的方法来实现您所追求的目标

 $("form").submit(function() { $(this).children('input[value=""]').each(function(){ // Rename the name attribute to something else if the value is "" to it isn't submitted $(this).attr('blank', $(this).attr('name')); $(this).removeAttr('name'); }); } 

然后，如果您正在使用vlient方validation或通过ajax发布，那么您需要设置name属性，以便下一次提交将正常工作…

 $(this).attr('name', $(this).attr('blank')); $(this).removeAttr('blank'); 

Answer 6

在提交时删除空字段

 $(function() { $('form').submit(function () { var $empty_fields = $(this).find(':input').filter(function () { return $(this).val() === ''; }); $empty_fields.prop('disabled', true); return true; }); }); 

结合几个function和主观风格，尤其是：

• .find()比.find() 更深入 。
• .val() === ''适用于textarea和更改的属性， [value=""]不适用。
• .prop() over .attr() 。