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

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?

puede intentar usar el enlace de referencia trigger ()

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

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í.

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()

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).

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.

¡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!

Yo uso este código simple:

//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');
});

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

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

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();

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>

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>

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();

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

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

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

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.