Cómo restablecer un formulario usando jQuery con el método .reset ()

321

Tenía un código de trabajo que podía restablecer mi formulario cuando hago clic en un botón de restablecimiento. Sin embargo, después de que mi código se alarga, me doy cuenta de que ya no funciona.

<div id="labels">
  <table class="config">
    <thead>
      <tr>
        <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
      </tr>
      <tr>
        <th>Index</th>
        <th>Switch</th>
        <th>Response Number</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>            
      <form id="configform" name= "input" action="#" method="get">
        <tr>
          <td style="text-align: center">1</td>
          <td><img src= "static/switch.png" height="100px" width="108px"></td>
          <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
          <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
        </tr>
        <tr>
          <td style="text-align: center">2</td>
          <td><img src= "static/switch.png" height="100px" width="108px"></td>
          <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
          <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
        </tr>
        <tr>
          <td style="text-align: center">3</td>
          <td><img src= "static/switch.png" height="100px" width="108px"></td>
          <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
          <td><input style="background: white; color: black;" type="text" id="label_three"></td>
        </tr>
        <tr>
          <td style="text-align: center">4</td>
          <td><img src= "static/switch.png" height="100px" width="108px"></td>
          <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
          <td><input style="background: white; color: black;" type="text" id="label_three"></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="submit" id="configsubmit" value="Submit"></td>
        </tr>
        <tr>
          <td><input type="reset" id="configreset" value="Reset"></td>
        </tr>
                  
      </form>
    </tbody>
  </table>
            
</div>

Y mi jQuery:

$('#configreset').click(function(){
    $('#configform')[0].reset();
});

¿Hay alguna fuente que deba incluir en mis códigos para que el .reset()método funcione? Anteriormente estaba usando:

<script src="static/jquery.min.js"></script>
<script src="static/jquery.mobile-1.2.0.min.js"></script>

y el .reset()método estaba funcionando.

Actualmente estoy usando

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

¿Podría ser una de las razones?

5
  • ¿Puede dar un ejemplo de que no funciona? ¿Se resetea alguno de los campos? 9 de mayo de 2013 a las 3:20
  • es algo como esto, pero está funcionando bien aquí jsfiddle.net/chJ8B :( probablemente debido a otras partes del script? pero solo tengo 1 formulario 9 de mayo de 2013 a las 3:26
  • mi pregunta es si ninguno de los campos se restablece / algunos están funcionando 9 de mayo de 2013 a las 3:27
  • 13
    Tu HTML no es válido . Un formulario no puede ser hijo de un elemento TBODY y un TR no puede ser hijo de un elemento FORM. Coloque las etiquetas del formulario fuera de la tabla (es decir, coloque la tabla en el formulario). Es muy posible que el formulario se mueva fuera de la tabla, pero los controles del formulario permanecen en las celdas, por lo que ya no están en el formulario.
    RobG
    9 de mayo de 2013 a las 8:33
  • @RobG: ¡Buen punto! intentaré eso. ¡gracias! Podría haberme perdido este comentario útil si no vuelvo aquí para obtener mi enlace de violín: s 14 de mayo de 2013 a las 8:52
545

puede intentar usar el enlace de referencia de trigger ()

$('#form_id').trigger("reset");
9
  • 2
    ¡Simplemente mágico y sencillo! Muy apreciado por compartir. 10/12/18 a las 19:38
  • Estimados votantes en contra, ¿podrían decirme la razón detrás de sus votos en contra, para que pueda mejorar mi respuesta? 5 feb 2019 a las 9:51
  • Estoy usando $ ('. Profile_img_form'). Trigger ('reset'); He agregado la clase con nombre profile_img_form en mi formulario y luego la llamé. no restablece mi formulario y devuelve un mensaje de error como Error de sintaxis no detectado: Expresión regular no válida: /(^|\.)bs\.(?:.*\.|)fileinput(\.|$)/: Por favor sugiera lo que es asunto. Gracias.
    Kamlesh
    25 de septiembre de 2019 a las 12:22
  • @Kamlesh debería funcionar, he creado una demostración para ti, haz clic en jsfiddle.net/Lkt4eq9y/2 26 de septiembre de 2019 a las 4:25
  • 1
    Gracias por la respuesta. Horas guardadas de Google / SO'ing :) 6 de mayo de 2020 a las 15:21
293

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

Ponlo en JS violín. Funcionó como estaba previsto.

Entonces, ninguno de los problemas mencionados anteriormente tiene la culpa aquí. ¿Quizás tienes un problema de identificación en conflicto? ¿Se está ejecutando realmente el clic?

Editar: (porque soy un saco triste sin la capacidad adecuada para comentar) No es un problema directamente con su código. Funciona bien cuando lo saca del contexto de la página que está utilizando actualmente, por lo que, en lugar de ser algo con jQuery / javascript y datos de formulario atribuidos en particular, tiene que ser algo más. Comenzaría a dividir el código en dos y trataría de encontrar dónde está sucediendo. Quiero decir, solo para 'asegurarse', supongo que podrías ...

console.log($('#configform')[0]);

en la función de clic y asegúrese de que esté orientado al formulario correcto ...

y si es así, tiene que ser algo que no esté listado aquí.

editar parte 2: Una cosa que podría intentar (si no está apuntando correctamente) es usar "input: reset" en lugar de lo que está usando ... también, sugeriría porque no es el objetivo el que está funcionando incorrectamente para averiguarlo a qué se dirige el clic real. Simplemente abra las herramientas de desarrollo / firebug, lo que tenga, arroje

console.log($('#configreset'))

y mira lo que aparece. y luego podemos ir desde allí.

dieciséis
  • sin ID en conflicto :( Estoy tratando de seleccionar capa por capa y verificar si el clic funciona 9 de mayo de 2013 a las 2:16
  • 1
    hmm parece que el clic no funciona! agregué $('#ptest').html("clicked reset")en el clic (función () {}); donde debería mostrar "se hizo clic en restablecer" pero no apareció 9 de mayo de 2013 a las 2:22
  • Tengo una pregunta aqui. cada vez que uso console.log, no tengo idea de dónde buscarlo. Estoy usando Python IDLE y una terminal para ejecutar el script de Python. el javascript está en él. de todos modos, cuando uso `alert ($ ('# configform') [0]), me da [object HTMLFormElement] 9 de mayo de 2013 a las 2:33
  • 1
    Intente usar alert (JSON.stringify ($ '# configform') [0])). A Alert no le interesan mucho los objetos de impresión bonitos (o que te digan lo que hay en ellos). Solo te permite saber que es un objeto. 9 de mayo de 2013 a las 2:41
  • 1
    @DylanChensky la magia de jQuery es que todo es un conjunto (matriz). Al igual que si estuviera utilizando una matriz regular en jQuery, [0]selecciona el primer elemento. Pero en jQuery, selecciona el html real del elemento. Entonces, le [0]está dando el html, que le permite llamar al método html, no jQuery, llamado reset. Consulte la respuesta de @kevin a continuación para obtener más información. 10/07/2016 a las 12:59
112

Según esta publicación aquí , jQuery no tiene ningún reset()método; pero JavaScript nativo lo hace. Entonces, convierta el elemento jQuery en un objeto JavaScript usando:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
3
  • 1
    Funciona y estoy de acuerdo, jQuery no tiene un método reset (). Puede ver cómo hacerlo con JavaScript nativo en w3school doc: w3schools.com/jsref/met_form_reset.asp
    serfer2
    26 de junio de 2014 a las 8:20
  • 2
    Me gustaría señalar que esto solo restablecerá el formulario, no lo borrará. Es decir, si el formulario tenía valores enviados con la solicitud, estos serán restaurados. 10 de diciembre de 2014 a las 12:57
  • Me gustaría agregar un comentario sobre el marcador de posición, la representación inicial del formulario, los elementos del formulario tienen valores de marcador de posición, después de este restablecimiento, independientemente del marcador de posición que se muestra nuevamente, pero el valor se vuelve en blanco, así que tenga cuidado durante la validación del formulario. Estaba agregando validación de formulario genérico para verificar que el valor del marcador de posición sea predeterminado. 6 de enero de 2016 a las 6:18
50

Esta es una de esas cosas que en realidad es más fácil de hacer en Vanilla Javascript que en jQuery. jQuery no tiene un resetmétodo, pero el elemento de formulario HTML sí, por lo que puede restablecer todos los campos en un formulario como este:

document.getElementById('configform').reset();

Si hace esto a través de jQuery (como se ve en otras respuestas aquí :) $('#configform')[0].reset(), [0]está obteniendo el mismo elemento DOM de formulario que obtendría directamente a través de document.getElementById. Sin embargo, el último enfoque es más eficiente y más simple (ya que con el enfoque jQuery primero obtienes una colección y luego tienes que buscar un elemento de ella, mientras que con el Javascript vanilla solo obtienes el elemento directamente).

26

Un botón de reinicio no necesita ningún script en absoluto (ni nombre o identificación):

<input type="reset">

y tu estas listo. Pero si realmente debe usar un script, tenga en cuenta que cada control de formulario tiene una propiedad de formulario que hace referencia al formulario en el que se encuentra, por lo que puede hacer:

<input type="button" onclick="this.form.reset();">

Pero un botón de reinicio es una opción mucho mejor.

9
  • ¿Te refieres simplemente a esa línea? oO, ¿es correcto mi HTML anterior? 9 de mayo de 2013 a las 2:31
  • Defina "no funciona". ¿Qué error obtienes? ¿Qué no está funcionando? Los botones de reinicio han sido parte de los formularios HTML desde siempre, funcionan.
    RobG
    9 de mayo de 2013 a las 8:31
  • 1
    "no funciona": no restablece nada, no se observaron cambios en el formulario. 10 de mayo de 2013 a las 0:57
  • 1
    Algo a tener en cuenta es que "restablecer" no significa "mi formulario se borró". Lo que hace la semántica de "reset" es devolver todos los elementos de "formulario" a sus atributos de "valor" originales. ¡Eso me confundió al menos por unos minutos!
    jocull
    12 oct 2016 a las 20:27
  • 1
    @ Lazerbeak12345: lamentablemente, casi todas las páginas web son ahora virtualmente aplicaciones que sobrescriben casi todas las funciones predeterminadas de los DOM HTML. Por lo tanto, incluso las páginas muy simples ahora tienen muchos megabytes de secuencias de comandos y bibliotecas donde antes eran 20 o 30k de HTML con una pequeña secuencia de comandos. No solo se desperdicia la potencia de procesamiento y el ancho de banda, sino que la accesibilidad y la usabilidad son generalmente muy deficientes. :-(
    RobG
    8 de mayo de 2020 a las 22:33
26

La primera línea restablecerá las entradas de formulario

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

El segundo restablecerá select2

Opcional: puede usar esto si tiene diferentes tipos registrados con diferentes eventos

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
23

¡¡Por fin he resuelto el problema !! @RobG tenía razón sobre la formetiqueta y la tableetiqueta. la formetiqueta debe colocarse fuera de la mesa. con ese,

<td><input type="reset" id="configreset" value="Reset"></td>

funciona sin la necesidad de jquery o cualquier otra cosa. simplemente haga clic en el botón y tadaa ~ se restablece todo el formulario;) ¡brillante!

2
  • 3
    Por lo general, puede confirmar que esto está sucediendo inspeccionando el código fuente (no viendo el código fuente de la página, ya que eso mostrará lo que se generó, sino usando algo como Herramientas de desarrollo <kbd> F12 </kbd>), que le muestra "lo que navegador ve "- en cuyo caso le mostraría (en Chrome, al menos) que la formetiqueta se había cerrado automáticamente al principio del tbody, excluyendo los elementos de entrada.
    drzaus
    13/0214 a las 18:31
  • compruebe la compatibilidad: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset 3/07/18 a las 19:12
20

jQuery no tiene reset()método; pero JavaScript nativo lo hace. Entonces, convierta el elemento jQuery en un objeto JavaScript usando:

$("#formId")[0].reset();

$("#formId").get(0).reset();

Podemos simplemente usar código Javascript

document.getElementById("formid").reset();
17

Yo uso este simple código:

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});
1
13

Usando la función jquery .closest (elemento) y .find (...) .

Obteniendo el elemento padre y buscando al hijo .

Finalmente, realice la función necesaria.

$("#form").closest('form').find("input[type=text], textarea").val("");
2
  • 4
    Si bien este bloque de código puede responder a la pregunta, siempre debe proporcionar alguna explicación de por qué lo hace. 25 feb 2015 a las 7:30
  • 1
    $("#form").find("input[type=text], textarea").val(""); lo hice de esta manera
    Bira
    12 mar 2019 a las 3:15
5

Un restablecimiento rápido de los campos del formulario es posible con esta función de restablecimiento de jQuery.

cuando obtenga una respuesta de éxito, active el código siguiente.

$(selector)[0].reset();

0
4

Puede simplemente agregar un tipo de entrada = restablecer con un id = restablecer formulario como este

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

luego, con jquery, simplemente usa la función .click () en el elemento con id = resetform de la siguiente manera

<script> 
$('#resetform').click();
</script>

y el formulario se reinicia Nota: También puede ocultar el botón de reinicio con id = resetform usando su css

<style>
#resetform
{
display:none;
}
</style>
1
  • No te olvides de esconderlo ... para que sea una forma más moderna. <input type = 'reset' id = 'resetform' value = 'reset' / style = 'display: none;'>
    mangas
    6 mar. 18 a las 13:17
3

Aquí hay una solución simple con Jquery. Funciona a nivel mundial. Eche un vistazo al código.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

Agregue una clase clara a un botón en cada forma que necesite para restablecerlo. Por ejemplo:

<button class="button clear" type="reset">Clear</button>
2
<button type="reset">Reset</reset>

La forma más sencilla en la que puedo pensar es robusta. Colóquelo dentro de la etiqueta del formulario.

0

Tu código debería funcionar. Asegúrate de que static/jquery-1.9.1.min.jsexista. Además, puede intentar volver a static/jquery.min.js. Si eso soluciona el problema, entonces ha identificado el problema.

2
  • El único otro problema en el que puedo pensar es que tienes otro formulario con el mismo id ( configform). Deberías investigar un poco usando la consola. Primer intento $. Si está usando Chrome, escribir $en la consola activará una lista sensible al contexto si jQuery está cargado. Si escribe $y presiona retorno, se evaluará como una función si jQuery está cargado. Siguiente intento $("#configform"). Haga clic derecho en el resultado y seleccione Reveal in Elements panel.
    ic3b3rg
    9 de mayo de 2013 a las 12:38 p.m.
  • gracias :) pero no tengo Chrome. ¿Es la misma forma de hacerlo usando firebug? (lo tengo instalado pero nunca lo uso antes) 10 de mayo de 2013 a las 0:59
0

Puede utilizar este formulario con estilo: https://codepen.io/AFM93/pen/dyvwqwj

HTML:

<form class="formReset"><form>

JS:

$('.formReset')[0].reset();
1
  • Su respuesta parece idéntica a las respuestas existentes. 15 de junio a las 21:57
-1

Puede utilizar lo siguiente.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

Luego borre el formulario:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });
1
  • 2
    Parece que hay mucho código específico del marco aquí. Recomiendo evitar tales cosas al responder preguntas sobre SO, ya que la pregunta no especificaba que estaban usando ningún marco aparte de jQuery 8 de mayo de 2020 a las 15:20