javascript - jquery访问没有类名的表单

Question

我有一个表格，

<form id="form3" name="form3">
  <input type="text" id="number" name="number" value="" >Number</input>
  <button type="button" onclick="submit();">Submit</button>
</form>

现在，在我的提交函数中，我必须获取表单。如果我这样做

var formObj = $(this).closest('form');

它会给我表格。但是，它将是对象类型，跟踪返回

"formObj:[object Object]"

我必须将表单作为一种 HTMLFormElement 获取。我可以这样做

var formForm = document.forms["form3"];

这在某种程度上给了我

"formForm:[object HTMLFormElement]"

问题是，我需要访问 formForm，但还不知道它的名称是 form3，因为我需要从提交函数中访问它。

如何从按钮内部访问作为一种 HTMLFormElement 的表单？

Answer 1

jQuery 对象的属性 [0] 是纯 DOM 元素:$(selector)[0] 如果只有一个。如果还有更多 - $(selector)[1] 等，您可以继续该逻辑。

但是，有更简洁的方法来处理这个问题。 It is not good to use inline js (click here for more).

Live demo with better practices (click).

示例标记:

<form class="foo">
  <button type="button" class="my-submit-button">Submit</button>
</form>
<form class="bar">
  <button type="button" class="my-submit-button">Submit</button>
</form>

JavaScript:

//get button references
var buttons = document.getElementsByClassName('my-submit-button');

//for each button, add the click function
for (var i=0; i<buttons.length; ++i) {
  buttons[i].addEventListener('click', myFunction);
}

//the function to fire when clicked.
function myFunction(event) {
  console.log(this.form);
  alert(this.form.className);
}

使用 jQuery，我们甚至可以将其简化为: Live demo here (click).

$('form > button').click(function() {
  console.log(this.form.className);
});