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

Posted 2023-05-09

【中文标题】如果不是直接字段，则 Javascript 表单元素 id parentNode

【英文标题】：Javascript form element id parentNode if not direct field

【发布时间】：2014-11-04 00:45:35

【问题描述】：

当我点击网页中的表单字段（例如文本输入）时，我需要知道父表单的 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。

谢谢

【问题讨论】：

编辑后我不确定为什么我的答案对您不起作用？你不能看一下最接近形式的id并将其与formContatti-footer进行比较吗？

因为我创建了一个 document.querySelectorAll('form');，然后使用 for 循环控制表单的所有元素，以查看我单击的是否是具有活动焦点的元素（使用另一个 for 进入第一个： for (x=0; x

【参考方案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

【讨论】：

谢谢，如果我页面中的 2 个表单的输入 id 不同，则此工作。就我而言，我有第一个表单，id form-contact 和第二个表单新闻。在表单中有一个带有 id email 的 INPUT 字段。当我在两个或一个中单击此字段时，结果永远是“form-contact”，即找到的第一个表单。我如何才能真正区分不同形式的具有相同输入 id 元素的 form-id？

@almal 很难理解您的最后评论，您介意创建一个独立的小型示例来说明您的问题吗？可能在jsfiddle.net ?

【参考方案2】：

既然你用“jquery”标记了这个问题，下面是一个使用 jquery 的答案：

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

【参考方案3】：

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

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

【讨论】：

你不需要toLowerCase它，你可以对照"INPUT"检查它总是大写的。除此之外 - 很好的答案。

【参考方案4】：

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

formID = elements[x].form.id

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