使用 JavaScript 提交时从 DOM 中删除所有空表单字段答案

【问题标题】：Deleting all Empty Form Fields from DOM on submit with JavaScript使用 JavaScript 提交时从 DOM 中删除所有空表单字段
【发布时间】：2021-01-23 21:46:03
【问题描述】：

所以我正在处理从另一个开发人员那里继承的有条件的 Shopify 表单。基本上，它使用 JavaScript/Jquery 来验证字段并确保在进行下一步之前填写所有必填字段。稍加修改后，我的验证按预期工作，但遇到了一个问题。问题是，由于表单设置为有条件呈现的方式，输入设置为 style="display:none;"使用 JavaScript 提交空白。这很混乱，所以我设置了以下函数：

$("body").on("click", "submit_button", function(){
  var elements = document.getElementsByTagName("input")
    for (var i = 0; i <= elements.length; i++) {
      if(elements[i].value == "" ) {
        elements[i].remove()
      }
    }
})

这很好用，但总是有一个输入是空白的，这很好，但并不理想。

我已经仔细检查以确保提交空白的元素确实是输入元素（它是）。我最初也设置了循环，以便 for 语句如下，并看到相同的结果：

for (var i = 0; i < elements.length; i++) {

关于为什么我在提交时留下一个空白字段的任何想法？感谢您的帮助！

【问题讨论】：

当你console.log()每个字段的值时，你的循环中剩下的那个显示什么？
该元素是文档的一部分，并且有一个标签 Name of input？根据 W3 文档，

标签： javascript jquery forms validation shopify

【解决方案1】：

你有 jQuery。你应该使用它。

$("body").on("click", "submit_button", function(){
  $(":text").filter(function () { return !this.value }).remove();
});

【讨论】：

做到了！我现在可以提交并只获得填写的字段。谢谢，@Tomalak！

【解决方案2】：

关于为什么我在提交时留下一个空白字段的任何想法？感谢您的帮助！

您可能有一个不是input 的表单字段 - 三种主要类型的表单元素是input、select 和textarea。在您的选择器中，您只是在寻找 input 字段，所以我的猜测是空白来自 select 或 textarea，这也在表单中。

或者，您的代码可能会中断，因为您在迭代数组时正在.remove()'ing 数组中的元素。这会导致数组在循环时更改长度，这可能会导致您在元素索引更改时跳过元素。

假设您只关心实际提交的表单中的输入字段，您可以在此处利用表单和表单元素的一些有趣功能，而无需使用任何额外的选择器（jQuery 或其他方式）性能提升。

每个表单元素都知道它所属的表单 (<Element>.form)，每个表单都知道它包含的所有表单元素。事实上，<Form>.length 会返回此类表单元素的数量（输入、选择和文本区域，以及字段集等），而<Form>[i] 将在ith 位置为您提供表单元素（如果@987654333 @ 是一个整数 - 因此是一个数组查找）或所有名称为 i 的元素（如果 i 是一个字符串 - 就像访问对象中的属性一样）

其次，您可以通过完全删除元素或简单地从字段中清除name 属性来阻止发送数据。如果我们在表单元素上创建一个循环，我们可以通过将空白元素设置为具有空白name 属性来避免更改数组索引的问题。（如果我们真的想删除元素，我们也可以从索引 (length - 1) 开始遍历数组并在索引 0 结束 - 这样更改的索引只会影响我们已经检查过的元素）

说你可以做这样的事情有点长：

// Step 1: get the form element. 
// In a jQuery event listener, the keyword `this` will be bound to the element the event was attached to, which in this case will be the submit button.

var form = this.form;  // Every form element knows about its form

// Iterate through the form elements and remove the 'name' field from the blank elements.
for(var i=0; i<form.length; i++){  // form.length is the number of form elements
  var element = form[i];           // We can access form elements using their index
  if(!element.value){
    element.name = '';             // A field with no name will not be submitted
  }
}

【讨论】：