Question

我搜索并尝试了许多解决方案＆＃39;我发现周围但没有人为我工作。所以我的页面上有两个表单mainForm＆amp; secondaryFrom。我已经在JS中设置了代码，以便每个形式都可以使用。根据语句显示属性为block或none，反之亦然，并且一次显示一个属性。但是，如果显示的表单具有值，则它们会与其他表单的值（例如名称和电子邮件输入值）混合在一起，并且在提交时，我会收到两个表单＆＃39;值。所以我希望清除其他隐藏的表单值，如果它获得none作为显示属性，反之亦然，每次更改它们的显示时。希望我能够很好地解释它。

HTML：

<form id="mainForm">
  <!-- inputs and labels. All inputs have 'main-input' classes -->
</form>
<form id="secondaryForm">
  <!-- inputs and labels. All inputs have 'secondary-input' classes -->
</form>

按钮点击即可运行：

JS：

const mainForm = document.getElementById('mainForm');
const secondaryForm = document.getElementById('secondaryForm');
    if (mainForm.style.display == 'block') {
            document.getElementsByClassName('secondary-input').value = '';

        }
    if (secondaryForm.style.display == 'block') {
            document.getElementsByClassName('main-input').value = '';
    }

我也尝试过reset（）方法，但仍然无法正常工作。怎么做到这一点？

Answer 1

document.getElementsByClassName（＆＃39; secondary-input＆＃39;）方法返回元素集合。

您应该迭代集合并单独设置值

var elements = document.getElementsByClassName('main-input');
for (var index = 0; index < elements.length; index++) {
    elements[index].value='';
}

Answer 2

您的代码存在一个问题：getElementsByClassName返回一个集合。如果出售使用getElementsByClassName逻辑的想法，则需要遍历集合以清除值。否则，您需要按索引引用每个集合项。当然你总是可以切换到getElementById。

假设你有2个'main-input'输入和2个'secondary'input'输入，下面的工作就可以了。抱歉没有花时间编写for循环或提供完整的代码向您展示。我想你会看到我的意思，如果你插入并读取getElementByClassName。还在弄清楚如何在SO编辑器中发布好的代码示例。干杯！

  document.getElementsByClassName('main-input')[0].value = '';
  document.getElementsByClassName('main-input')[1].value = '';
  document.getElementsByClassName('secondary-input')[0].value = '';
  document.getElementsByClassName('secondary-input')[1].value = '';

如何根据两种情况清除表单？

2 个答案: