一页上的两个表单具有相同的输入字段答案

【问题标题】：Two forms on one page with same input fields一页上的两个表单具有相同的输入字段
【发布时间】：2017-08-15 13:41:02
【问题描述】：

所以我在一个页面上有 2 个相同的表单，我不能给出不同的名称，因为它们与后端绑定。

我在不同的表单上有一些具有相同 ID 的输入恶魔，使用 document.getElementById('id').value 来检查它们是否为空；

奇怪的是，一半的输入字段是在一个表单中检查的，而另一半是从另一个表单中检查的（这是当用户只在一个表单中输入值时），尽管他们使用了 2 个不同的 javascript 函数。对于一个输入字段，它会自动获取最接近的 id，对于其他输入字段，它会一直到另一个表单。

我的问题是如何获取最接近提交按钮（或其中一个表单附近的其他元素）的要检查元素的值？

我尝试使用 jQuest nearest() 方法，但我似乎无法使用所有 document.getElementById。

【问题讨论】：

请向我们展示您的代码？
您能否将输入字段上的 ID 更改为唯一的？这样你可以确保你 document.getElementById('someId') 肯定返回正确的元素，你不必依赖 jQuery 方法。
简单：改变你的后端。显然，当您为 2 个相同的表格提供相同的 ID 时，您做错了。您应该使用唯一的 ID（如 ID 应该始终是唯一的）或将 id 属性更改为 class。看到jquery 标记，然后执行$('form.className').on('change', function() { // what you wanted to do - e.g. $(this).validate(); }); - 将自动将'change' listeners 绑定到所有<form class="theName"> 元素并独立处理它们。

【解决方案1】：

元素 ID 应该始终是唯一的。您永远不应该有 2 个或更多具有相同 ID 的元素。 document.getElementById('someId') 期望返回 1 个元素，而不是元素数组 - 如果您想要获取多个不需要重复 ID 的元素，还有其他可用的函数。

来自 w3schools：

一个 ID 在一个页面中应该是唯一的。但是，如果存在多个具有指定 ID 的元素，则 getElementById() 方法会返回源代码中的第一个元素。

【讨论】：