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


270

Tenía un código de trabajo que podría restablecer mi formulario cuando hago clic en un botón de reinicio. Sin embargo, después de que mi código se hace más largo, 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?


¿Puedes dar un ejemplo de no trabajar? ¿Se está restableciendo alguno de los campos?
Arun P Johny

es algo como esto pero está funcionando bien aquí jsfiddle.net/chJ8B :( probablemente debido a otras partes del script? pero solo tengo 1 formulario
yvonnezoe

mi pregunta es si ninguno de los campos se reinicia / algunos funcionan
Arun P Johny

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

@RobG: ¡Oh, buen punto! Lo intentaré. ¡gracias! Me podría haber perdido este útil comentario si no regreso aquí para obtener mi enlace de violín: s
yvonnezoe

Respuestas:


464

puede intentar usar el enlace de referencia trigger ()

$('#form_id').trigger("reset");

2
Simplemente mágico y directo! Muy apreciado por compartir.
Ajay Kumar

Estimados votantes, ¿podrían decirme la razón detrás de sus votos negativos, para que pueda mejorar mi respuesta?
SagarPPanchal

Estoy usando $ ('. Profile_img_form'). Trigger ('reset'); Agregué 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 Uncaught SyntaxError: Expresión regular no válida: /(^|\.)bs\.(?:.*\.|)fileinput(\.|$)/: Sugiera amablemente lo que es problema. Gracias.
Kamlesh

@Kamlesh debería funcionar, he creado una demostración para usted, haga clic en jsfiddle.net/Lkt4eq9y/2
SagarPPanchal

1
Gracias por la respuesta. Horas guardadas de Google / SO'ing :)
Anjana Silva

276

http://jsfiddle.net/8zLLn/

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

Ponlo en el violín JS. Trabajó según lo previsto.

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

Editar: (porque soy un saco triste sin la capacidad de comentario adecuada) 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 los datos de formulario jQuery / javascript y atribuidos particulares, tiene que ser algo más. Comenzaría a bisecar el código y trataría de encontrar dónde está yendo. Quiero decir, solo para 'asegurarme', supongo que podrías ...

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

en la función de clic y asegúrese de que esté dirigido a la forma correcta ...

y si es así, tiene que ser algo que no esté en la lista aquí.

edite la 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 lo que funciona incorrectamente para averiguarlo a qué se dirige el clic real. Simplemente abra las herramientas de Firebug / Developer, lo que tenga, agregue

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

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


sin ID en conflicto :( Estoy tratando de seleccionar capa por capa y verificar si el clic funciona
yvonnezoe

1
hmm parece que el clic no funciona! agregué $('#ptest').html("clicked reset")en el clic (función () {}); donde debería mostrar "restablecer
cliqueado

Tengo una pregunta aqui. Cada vez que uso console.log, no tengo idea de dónde buscarlo. Estoy usando Python IDLE y un terminal para ejecutar el script de Python. el javascript está en él. de todos modos, cuando uso `alert ($ ('# configform') [0]), me da [object HTMLFormElement]
yvonnezoe

1
Intente usar alert (JSON.stringify ($ '# configform') [0])). A Alert no le importan mucho los objetos bonitos de impresión (o decirle lo que contiene). Simplemente te hace saber que es un objeto.
FullOnFlatWhite

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 html, no al jQuery, método llamado reset. Consulte la respuesta de @kevin a continuación para obtener más información.
FullOnFlatWhite

110

De acuerdo con esta publicación aquí , jQuery no tiene reset()método; pero JavaScript nativo sí. Entonces, convierta el elemento jQuery en un objeto JavaScript usando:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

1
Funciona y estoy de acuerdo, jQuery no tiene método reset (). Puede ver cómo hacerlo con JavaScript nativo en w3school doc: w3schools.com/jsref/met_form_reset.asp
serfer2

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, esos serán restaurados.
Protector uno

Me gustaría agregar comentarios sobre el marcador de posición, el procesamiento 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 queda en blanco, así que tenga cuidado al validar el formulario. Estaba agregando validación de formulario genérico para verificar que el valor del marcador de posición es predeterminado.
Ramratan Gupta

48

Esta es una de esas cosas que en realidad es más fácil de hacer en Javascript vainilla que 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 document.getElementById. Sin embargo, el último enfoque es más eficiente y 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 de vainilla solo obtienes el elemento directamente).


23

Un botón de reinicio no necesita ningún script (o nombre o id):

<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 lo siguiente:

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

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


¿quieres decir simplemente que esa línea servirá? oO, ¿es correcto mi html anterior?
yvonnezoe

Definir "no funciona". ¿Qué error obtienes? ¿Qué no funciona? Los botones de reinicio han sido parte de los formularios HTML desde siempre, funcionan.
RobG

1
"no funciona": no restablece nada, no se observó ningún cambio en el formulario.
yvonnezoe

1
Algo a tener en cuenta es que "restablecer" no significa "mi formulario está borrado". Lo que realmente hace la semántica de "restablecer" es devolver todos los elementos de "forma" a sus atributos de "valor" originales. ¡Eso me confundió por unos minutos al menos!
Jocull

@ jocull: cuando todo lo demás falla, siempre existe la versión W3C o WHATWG del estándar HTML. ;-)
RobG

21

¡Finalmente 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;) genial!


3
por lo general, puede confirmar que esto está sucediendo inspeccionando el código fuente (no viendo la fuente de la página, ya que eso mostrará lo que se generó, sino más bien usando algo como Herramientas para desarrolladores <kbd> F12 </kbd>), que le muestra "qué el 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

Mediante el uso de la función jquery .closest (elemento) y .find (...) .

Obteniendo el elemento padre y buscando al hijo .

Finalmente, haga la función necesaria.

$("#form").closest('form').find("input[type=text], textarea").val("");

44
Si bien este bloque de código puede responder la pregunta, siempre debe proporcionar alguna explicación de por qué lo hace.
Sascha Wolf

1
$("#form").find("input[type=text], textarea").val("");lo hice de esta manera
Bira

11

La primera línea restablecerá las entradas del 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

5

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

cuando obtuviste una respuesta exitosa, entonces dispara debajo del código.

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


4

Simplemente puede agregar un tipo de entrada = restablecer con una id = resetform como esta

<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 restablece Nota: También puede ocultar el botón de reinicio con id = resetform usando su CSS

<style>
#resetform
{
display:none;
}
</style>

No se olvide de ocultarlo ... para que sea una forma más moderna. <input type = 'reset' id = 'resetform' value = 'reset' / style = 'display: none;'>
mangas

3

Aquí hay una solución simple con Jquery. Funciona a nivel mundial. Echa 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>

3

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

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

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

Podemos simplemente usar el código Javascript

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

2
<button type="reset">Reset</reset>

La forma más simple en que puedo pensar que es robusta. Colocar dentro de la etiqueta del formulario.


1

Puedes usar 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("");
        });
    });

Parece que hay mucho código de marco específico 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
Lazerbeak12345

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 has identificado el problema.


El único otro problema que se me ocurre es que tiene otra forma con el mismo id ( configform). Deberías investigar un poco usando la consola. Primer intento $. Si está usando Chrome, al escribir $en la consola se activará una lista sensible al contexto si se carga jQuery. Si escribe $y presiona Retorno, se evaluará a una función si se carga jQuery. Siguiente intento $("#configform"). Haga clic derecho en el resultado y seleccione Reveal in Elements panel.
ic3b3rg

gracias :) pero no tengo cromo. ¿Es la misma manera de hacerlo usando Firebug? (Lo tengo instalado pero nunca lo uso antes)
yvonnezoe
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.