jQuery查找父表单

Question

我有这段HTML代码

<ul>
    <li><form action="#" name="formName"></li>
    <li><input type="text" name="someName" /></li>
    <li><input type="text" name="someOtherName" /></li>
    <li><input type="submit" name="submitButton" value="send"></li>
    <li></form></li>
</ul>

如何选择包含input[name="submitButton"]的表单？ （当我点击提交按钮时，我想要选择该表单并在其中添加一些字段）

- kmunky

---

如果您只想添加字段并且已经知道它们应该包含什么，您可以使用隐藏字段。 - PRMan

Answer 1

我建议使用closest，它可以选择最接近的匹配父元素：

$('input[name="submitButton"]').closest("form");

我会这样做，而不是按名称过滤：

$('input[type=submit]').closest("form");

- karim79

---

也许我们应该添加按索引获取元素的功能？ '$("input[type=submit]").closest("form");' 返回一个表单数组。 - sergzach

我正在尝试以以下方式使用： $（“.each img”）.click（function（）{ $（this）.closest（“form”）.show（）; }）;但似乎无法正常工作。 :/ - Alisso

peterjwest的回答比这个更好。 - gagarine

在HTML5中，有一个新的“form”属性，允许您将元素放在父表单之外。应该先检查这一点。 - mcintyre321

Answer 2

您可以使用所有输入元素上存在的表单引用，这比使用.closest()方法要快得多（在Chrome和IE8中快5-10倍）。它也适用于IE6和7。

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();

- peterjwest

---

你提到了IE8。这对6、7和9版本也适用吗？ - Sonny

这是更好和更快的，正如@peterjwest所提到的。关于IE6，我认为在IE4上输入元素上的.form存在，不幸的是netscape dev页面现在已经消失了...而且谁会检查mozilla呢。 - Maciej Łopaciński

这是一种比使用closest()更安全的方式，因为输入可能有自己的表单分配：http://codepen.io/anon/pen/vNqEyg - Möhre

你可能使用了简写的if符号来使你的代码更短，但在这个例子中它只会分散你想要展示的实际代码（特别是对于不熟悉简写的人）。我建议使用常规的if()语句。 - AeonOfTime

我认为那个解决方案有太多的混乱。如果你采用我的解决方案（下面是我的解决方案-是的，这是一则广告：）：https://dev59.com/rnI-5IYBdhLWcg3w487k#18921404，那么你就不需要那种复杂性，因为它只会在应该工作时正常运行，否则什么也不做。 - userfuser

Answer 3

对我来说，这似乎是最简单/最快的方法：

$('form input[type=submit]').click(function() { // attach the listener to your button
   var yourWantedObjectIsHere = $(this.form);   // use the native JS object with `this`
});

- userfuser

---

对我而言，使用$(this.form)是最佳解决方案。 - jap1968

Answer 4

自HTML5浏览器起，可以使用inputElement.form属性 - 属性值必须是同一文档中一个<form>元素的ID。 更多信息请参见MDN。

- Alexander Mihailov

Answer 5

另请参阅 jquery/js -- 如何根据单击的提交按钮选择父表单？

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

- Jonathan Hendler