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');

它会给我表格。但是，它将是object类型，trace返回

"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);
});

Answer 2

您可以使用this.form访问表单内输入元素的任何事件处理程序中的父窗体，如

function submit() {
    var the_form = this.form;
}

或

function submit(event) {
    var the_form = event.target.form;
}

请注意，表单已经有一个submit（）函数，因此您应该使用其他名称

<button type="button" onclick="my_submit();">Submit</button>

Answer 3

似乎“这个”并没有调用我认为它应该具有的按钮。我通过改变

解决了这个问题

onclick="my_submit(this);"

function my_submit(btn) {
  var formForm = btn.form;
}

这很有效。谢谢大家。

jquery访问没有类名的表单

3 个答案: