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

Tenía un código que funcionaba y que podía reiniciar mi formulario cuando hacía clic en un botón de reinicio. Sin embargo, después de que mi código es cada vez más largo, me doy cuenta de que doesn't trabajo más.

 <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 método .reset() funcione? Anteriormente estaba usando:

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

y el método .reset() funcionaba.

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?

halfer
Pregunta editada 5º enero 2014 в 9:57
Programación
javascript reset forms jquery
9º mayo 2013 в 1:02
16 vistas

http://jsfiddle.net/8zLLn/

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

Ponerlo en JS fiddle. Funcionó como estaba previsto.

Por lo tanto, ninguno de los problemas antes mencionados son la culpa aquí. ¿Quizás tengas un problema de ID conflictivo? ¿Se ejecuta realmente el clic?

Editar: (porque soy un triste saco sin capacidad de comentar) No es un problema directamente con su código. Funciona bien cuando se toma fuera del contexto de la página que está utilizando actualmente, por lo que, en lugar de ser algo con el particular jQuery / javascript &; datos del formulario atribuido, tiene que ser otra cosa. I'd empezar a bisecar el código a su alrededor a cabo y tratar de encontrar donde it's pasando. Quiero decir, sólo para 'asegurarse', supongo que podría...

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

en la función de clic y asegurarse de que está apuntando a la forma correcta ...

y si lo es, tiene que ser algo que'no aparece aquí.

Editar parte 2: Una cosa que usted podría tratar (si it's no apuntando correctamente) es el uso de "input:reset" en lugar de lo que está utilizando ... también, i'd sugieren porque it's no el objetivo que's trabajando incorrectamente para averiguar lo que el clic real es el objetivo. Sólo tienes que abrir firebug / herramientas de desarrollo, whathave usted, tirar en

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

y ver lo que aparece. y entonces podemos ir de allí.

FullOnFlatWhite
Respuesta editada 9º mayo 2013 в 2:25
Comentarios (17)

Un botón de reinicio no necesita ninguna secuencia de comandos (o nombre o id):

<input type="reset">

y ya está. Pero si realmente debe usar script, tenga en cuenta que cada control de formulario tiene una propiedad form que hace referencia al formulario en el que se encuentra, por lo que podría hacer:

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

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

Comentarios (7)

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

Comentarios (2)