CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Von
Von

Reputation: 178

Interact with all forms of the page with a <button>

I have a <button type="reset">, used in a context menu which contains a lot of buttons and displays only the ones needed for each page.

My problem is that this button is supposed to reset all the forms of the page it is in, but it is in a lot of different pages. The only way I found is to pass the id of the form (which is the only way according to the doc) but every page is different so I can't use that method.

If anyone has a solution for this that would be awesome.

Upvotes: 1

Views: 68

Answers (3)

Chris
Chris

Reputation: 59521

This can be accomplished quite easily, but you would need to use javascript, either plain or with some kind of library, such as jQuery.

The plain javascript way

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

the above will iterate through all forms of your page and reset them one-by-one.

Demo:

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>

The jQuery way

You can also use jQuery to do the same thing, much like @AaronUllal´s answer.

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

Demo:

    $("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>

Upvotes: 2

Aaron Ullal
Aaron Ullal

Reputation: 5245

Using jquery you can select and reset all forms like this

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

Upvotes: 3

Martin
Martin

Reputation: 1822

If you can use jquery assign class to the forms that should be reset and select them by class.

Upvotes: 0

Related Questions