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＆＃34; azienda＆＃34;的字段。单击第一个或第二个表单和$（elements [x]）。parents（＆＃39; form＆＃39;）。attr（＆＃39; id＆＃39;）返回读取的第一个表单元素的id网页代码。

由于

Answer 1

好吧，尽管我在这里使用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

Answer 2

由于您使用“jquery”标记了问题，这里是使用jquery的答案：

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

Answer 3

首先，当你点击元素时，你可以检查是否是INPUT，在这种情况下，使用form_id parent，然后你可以在循环内进行比较

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

Answer 4

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

formID = elements[x].form.id

...获取元素的父表单的ID。 button，fieldset，legend，label，textarea和select元素也具有此属性。它在DOM Level 1中，因此浏览器支持几乎是普遍的。

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

4 个答案: