与页面的所有形式进行交互

Question

我有一个<button type="reset"> ，它在上下文菜单中使用，该菜单包含很多按钮，并且仅显示每个页面所需的按钮。

我的问题是，该按钮应该重置它所在页面的所有形式，但是它在许多不同的页面中。 我发现的唯一方法是传递表单的ID（根据文档，这是唯一的方法），但是每个页面都是不同的，所以我不能使用该方法。

如果有人对此有解决方案，那就太好了。

Answer 1

使用jquery，您可以选择并重置所有此类表格

$("button[type='reset']").click(function(){
 $('form').each(function() { this.reset() });
});

Answer 2

这可以很容易地完成，但是您将需要使用javascript，无论是纯Java还是与某种库（例如jQuery）一起使用。

普通的javascript方式

function reset() {
  var elements = document.getElementsByTagName("form");
  for (var i = 0; i < elements.length; i++) {
    elements[i].reset();
  }
}

上面的代码将遍历您页面的所有形式，并逐一重置它们。

演示：

 function reset() { var elements = document.getElementsByTagName("form"); for (var i = 0; i < elements.length; i++) { elements[i].reset(); } } 

 <form> Form 1 <input type="text" /> <input type="text" /> </form> <form> Form 2 <input type="text" /> <input type="text" /> </form> <form> Form 3 <input type="text" /> <input type="text" /> </form> <button onClick="reset();">Reset</button> 

---

jQuery方式

您也可以使用jQuery做同样的事情，就像@AaronUllal的答案一样。

$("button[type='reset']").on('click', function() {
  $('form').each(function() {
    this.reset();
  });
});

演示：

  $("button[type='reset']").on('click', function() { $('form').each(function() { this.reset(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> Form 1 <input type="text" /> <input type="text" /> </form> <form> Form 2 <input type="text" /> <input type="text" /> </form> <form> Form 3 <input type="text" /> <input type="text" /> </form> <button type="reset">Reset</button> 

Answer 3

如果可以使用jquery，则将类别分配给应重置的表单，然后按类别选择它们。