Tengo un <button type="reset">, usado en un menú contextual que contiene muchos botones y muestra solo los necesarios para cada página.

Mi problema es que se supone que este botón restablece todas las formas de la página en la que se encuentra, pero está en muchas páginas diferentes. La única forma que encontré es pasar la identificación del formulario (que es la única forma según el documento), pero cada página es diferente, por lo que no puedo usar ese método.

Si alguien tiene una solución para esto, sería increíble.

1
Von_Kavalier 12 may. 2016 a las 13:14

3 respuestas

La mejor respuesta

Esto se puede lograr con bastante facilidad, pero necesitaría usar JavaScript, ya sea simple o con algún tipo de biblioteca, como jQuery.

La forma simple de javascript

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

Lo anterior iterará a través de todas las formas de su página y las restablecerá una por una.

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>

La forma jQuery

También puede usar jQuery para hacer lo mismo, al igual que la respuesta de @ AaronUllal.

$("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>
2
Chris 12 may. 2016 a las 10:44

Usando jquery puede seleccionar y restablecer todos los formularios como este

$("button[type='reset']").click(function(){
 $('form').each(function() { this.reset() });
});
3
Aaron Ullal 12 may. 2016 a las 10:31

Si puede usar jquery, asigne la clase a los formularios que deben restablecerse y selecciónelos por clase.

0
Martin 12 may. 2016 a las 10:28