Javascript 表单元素 id parentNode 如果不是直接字段

Question

当我点击网页中的表单字段(例如文本输入)时，我需要知道父表单的 ID。 只要项目直接在表单标签内，我就使用

elements [x] .parentNode.id;

但是当表单元素被包含时，问题就出现了，例如，表单中的一个 div 元素。在这种情况下，该函数返回父 div 的 id 而不是表单。 如果所讨论的 INPUT 元素是表单的直接子元素或 div 中的内容或表单标记中的其他对象，我需要一个函数来始终告诉我哪个是父表单的 ID。

在我的例子中，问题更加复杂，因为在同一个网页中有两个具有不同 ID 的表单，其中包含两个具有相同属性的输入:

第一种形式

<form action="seminario.php" method="post" accept-charset="utf-8" id="formContatti-footer" novalidate="novalidate">
   <div class="form-footer-left">
   <input type="text" name="azienda" value="" id="azienda" class="inputText3" required="required"><br>
   </div>  
   <input type="image" src="images/btn-iscriviti.png" name="invia" class="invia-footer"><br><br>
</form>

第二个进入同一页面:

<form action="seminario.php" method="post" accept-charset="utf-8" id="formContatti-2" novalidate="novalidate">
   <div class="form-footer-left">
   <input type="text" name="azienda" value="Your email here" id="azienda" class="inputText3" required="required"><br>
   </div>  
   <input type="image" src="images/btn-iscriviti.png" name="invia" class="invia-footer"><br><br>
</form>

在这种情况下，我需要区分 ID 为“azienda”的字段是在第一个表单上还是在第二个表单上被单击，然后 $(elements[x]).parents('form').attr('id') 返回在网页代码中读取的第一个表单元素的 id。

谢谢

Answer 1

好吧，尽管我对在这里使用 jQuery 感到很不爽，但它 被标记了并且用它更简单 - 所以:

$(elements[x]).closest("form").attr("id")

应该做到这一点，closest 在树中找到与给定选择器匹配的最近元素，因此我们找到最接近的形式并匹配它。

在原生 JavaScript 中，您可以执行如下操作:

 var el = elements[x];
 while(el.parentNode.tagName !== "FORM") el = el.parentNode
 el.parentNode.id; // will find the form's id