使用<button>与所有形式的页面交互

Question

我有一个<button type="reset">，用于上下文菜单，其中包含很多按钮，只显示每个页面所需的按钮。

我的问题是这个按钮应该重置它所在页面的所有形式，但是它有很多不同的页面。我找到的唯一方法是传递表单的id（这是根据doc的唯一方法），但每个页面都不同，所以我不能使用该方法。

如果有人有解决方案，这将是非常棒的。

Answer 1

使用jquery，您可以选择并重置所有表单

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

Answer 2

这可以很容易地完成，但你需要使用javascript，无论是普通的还是某种类型的库，比如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 assign class，并按类选择它们。