所以我正在开发一个从另一个开发人员那里继承的条件Shopify表单。基本上，它使用JavaScript/Jquery来验证字段，并确保在进入下一步之前填写所有必需的字段。经过一点修改，我使验证按预期进行，但有一个问题。问题是，由于窗体被设置为有条件地呈现的方式，存在设置为style="的输入；显示：无"使用提交为空白的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++) {
关于为什么我在提交时只剩下一个空白字段，有什么想法吗？谢谢你的帮助！
您有jQuery。你应该用它。
$("body").on("click", "submit_button", function(){
$(":text").filter(function () { return !this.value }).remove();
});
关于为什么我在提交时只剩下一个空白字段，有什么想法吗？谢谢你的帮助！
您可能有一个不是input的表单字段-三种主要类型的表单元素是input、select和textarea。在您的选择器中，您只查找input字段，所以我猜测空白来自形式中的select或textarea。
或者，您的代码可能会中断，因为在对数组进行迭代时，您正在对数组中的元素进行.remove()处理。这会导致数组在循环时长度发生变化，这可能会导致您在元素索引发生变化时跳过这些元素。
假设您只关心实际提交的表单中的输入字段，那么表单和表单元素中有一些有趣的功能，您可以在这里利用这些功能，而无需使用任何额外的选择器(jQuery或其他(来提高性能。
每个表单元素都知道它所属的表单(<Element>.form(，每个表单都知道它包含的所有表单元素。事实上，<Form>.length返回这样的表单元素的数量(输入、选择和文本区域，以及字段集等(，<Form>[i]将为您提供位于i位置的表单元素(如果i是整数，则为数组查找(或名称为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
}
}