blocks|key|941945|text|http://api.jquery.com/closest/将做到这一点。像这样使用|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|941946|$('#elem').closest('form');|code-block|syntax|javascript|941947|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/closest/^0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p><a href="http://api.jquery.com/closest/" rel="noreferrer">http://api.jquery.com/closest/</a> will do it. Used like this</p>

<pre><code>$('#elem').closest('form');
</code></pre>


blocks|key|941951|text|$(".whatever").parents("form");|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|941952|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(".whatever").parents("form");
</code></pre>


blocks|key|942007|text|抛出内联事件处理程序，在这里保持低调。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|942008|$(document).ready(function(){
+++$('#btn1').bind('click',+function(){
++++++var+form+=+$(this).closest('form')[0];

++++++alert(form.id);+//+defined
++++++alert(form.action);+//+defined
+++});
});|code-block|syntax|javascript|942009|参考：.bind()，.closest()|offset|length|942010|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/bind/|1|http://api.jquery.com/closest/^0|0|0|3|7|0|B|A|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]|$I|10|J|11|1|12]]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

<p>Throw the inline event handler aboard and stay unobtrusive here.</p>

<pre><code>$(document).ready(function(){
   $('#btn1').bind('click', function(){
      var form = $(this).closest('form')[0];

      alert(form.id); // defined
      alert(form.action); // defined
   });
});
</code></pre>

<p>Ref.: <a href="http://api.jquery.com/closest/" rel="noreferrer">.closest()</a>, <a href="http://api.jquery.com/bind/" rel="noreferrer">.bind()</a></p>


blocks|key|1156178|text|Button元素具有表单属性http://www.w3schools.com/jsref/dom_obj_pushbutton.asp|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1156179|buttonElement.form|code-block|syntax|javascript|1156180|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/dom_obj_pushbutton.asp^0|E|1H|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Button element has form property <a href="http://www.w3schools.com/jsref/dom_obj_pushbutton.asp" rel="noreferrer">http://www.w3schools.com/jsref/dom_obj_pushbutton.asp</a></p>

<pre><code>buttonElement.form
</code></pre>


blocks|key|942040|text|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form+id="f1"+action="action1.html">
form1+<button+id="btn1"+onclick="get_attr(this);+return+false;"+>test+form+1</button>
</form>

<form+id="f2"+action="action2.html">
form2+<button+type="submit"+>test+form+2</button>
</form>

<script>

$('button[type="submit"]').click(function(e)+{
++++var+form+=+$(this).parent("form").get(0);
++++alert("ID:+"+%2B+form.id);
++++alert("Action:+"+%2B+form.action);
++++e.preventDefault();
});
function+get_attr(element)+{
++++var+form+=+$(element).parent("form").get(0);
++++alert("ID:+"+%2B+form.id);
++++alert("Action:+"+%2B+form.action);
}

</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|942041|Demo|unstyled|offset|length|942042|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/2d9tjLym/^0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;form id="f1" action="action1.html"&gt;
form1 &lt;button id="btn1" onclick="get_attr(this); return false;" &gt;test form 1&lt;/button&gt;
&lt;/form&gt;

&lt;form id="f2" action="action2.html"&gt;
form2 &lt;button type="submit" &gt;test form 2&lt;/button&gt;
&lt;/form&gt;

&lt;script&gt;

$('button[type="submit"]').click(function(e) {
    var form = $(this).parent("form").get(0);
    alert("ID: " + form.id);
    alert("Action: " + form.action);
    e.preventDefault();
});
function get_attr(element) {
    var form = $(element).parent("form").get(0);
    alert("ID: " + form.id);
    alert("Action: " + form.action);
}

&lt;/script&gt;
</code></pre>

<p><a href="http://jsfiddle.net/2d9tjLym/" rel="nofollow noreferrer">Demo</a></p>


<p>I am trying to find parent form from element using code below:</p>

<pre><code>&lt;form id="f1" action="action1.html"&gt;
form1 &lt;button id="btn1" onclick="testaction(this); return false;" &gt;test form 1&lt;/button&gt;
&lt;/form&gt;


&lt;script type="text/javascript" &gt;
function testaction(element) {
    var e = $(element.id);
    var form = e.parent('form');

    alert(form.id); // undefined!!
    alert(form.action); // undefined!!
    alert(document.forms[0].action); //http://localhost/action1.html
}
&lt;/script&gt;
</code></pre>

<p>It should be something really simple.... Thanks in advance</p>


How to find parent form from element?

我正在尝试使用以下代码从元素中查找父窗体：<form id="f1" action="action1.html">form1 <button id="btn1" onclick="testaction(this); return false;" >test form 1</button></form><script t...

问如何从元素中找到父表单？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从元素中找到父表单？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从元素中找到父表单？
EN