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

Question

我试图使用以下代码从元素中找到父表单:

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


<script type="text/javascript" >
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
}
</script>

它应该是非常简单的事情....提前谢谢

Answer 1

http://api.jquery.com/closest/会这样做.像这样使用

$('#elem').closest('form');

Answer 2

你遇到的问题是它form是一个jQuery对象,而不是一个DOM对象.如果你想让它成为表单对象,你会这样做e.parent('form').get(0).

此外,你正在错误地处理元素 - jQuery在表单中使用id选择器,#id但你已经传递了它id.

这是一个工作版本:

function testaction(element) {
  var e = $(element);//element not element.id
  var form = e.parent('form').get(0);//.get(0) added

  alert(form.id); // undefined!!
  alert(form.action); // undefined!!
  alert(document.forms[0].action); //http://localhost/action1.html
}

在行动中看到这个:http: //jsfiddle.net/BTmwq/

编辑:拼写,清晰度

Answer 3

Button元素具有表单属性http://www.w3schools.com/jsref/dom_obj_pushbutton.asp

buttonElement.form

Answer 4

抛出内联事件处理程序并在此保持不引人注目.

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

      alert(form.id); // defined
      alert(form.action); // defined
   });
});

编号:.closest() ,.bind()