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

Javascript form element id parentNode if not direct field

本文关键字：字段 如果不 parentNode 表单 元素 id Javascript      更新时间：2023-09-26

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

elements [x] .parentNode.id;

但是，当form元素被包含在表单中的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。

感谢

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

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

应该这样做，最接近找到树上与给定选择器匹配的最接近的元素，这样我们就可以找到最接近的形式并匹配它

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

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

由于您用"jquery"标记了问题，下面是使用jquery的答案：

$(elements[x]).parents('form').attr('id');

首先，当您点击元素时，您可以检查是否是INPUT，在这种情况下，取form_id父元素，然后您可以在循环中进行比较

var elementClicked = e.target.nodeName;
if (elementClicked.toLowerCase() === "input") {
            var formPid = $(elements[x]).parents('form').attr('id');
            ...some code
}

严格来说，这不是jQuery，但每个input元素都有一个form属性，该属性引用回它是其子元素的form元素。所以你可以用。。。

formID = elements[x].form.id

以获取元素的父窗体的ID。button、fieldset、legend、label、textarea和select元素也具有此属性。它在DOM级别1中，所以浏览器支持应该几乎是通用的。

相关文章：