javascript - inputs - Cómo restablecer un formulario usando jQuery con el método.reset()
reset form button jquery (13)
¡¡Por fin he resuelto el problema !! @RobG tenía razón sobre la etiqueta de form y la etiqueta de table . La etiqueta de form 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!
Tenía un código de trabajo que podí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 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() 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?
Aquí está la 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 formulario que necesite para restablecerlo. Por ejemplo:
<button class="button clear" type="reset">Clear</button>
Esta es una de esas cosas que en realidad es más fácil hacer en Javascript de vainilla que jQuery. jQuery no tiene un método de reset , pero el elemento de formulario HTML sí lo tiene, por lo que puede restablecer todos los campos en un formulario como este:
document.getElementById(''configform'').reset();
Si lo hace a través de jQuery (como se ve en otras respuestas aquí: $(''#configform'')[0].reset() ), el [0] está obteniendo el mismo elemento DOM de formulario que obtendría directamente a través de document.getElementById . Sin embargo, este último enfoque es más eficiente y más simple (ya que con el enfoque jQuery primero se obtiene una colección y luego se debe obtener un elemento, mientras que con el Javascript de vainilla solo se obtiene el elemento directamente).
Según esta publicación here , jQuery no tiene ningún método reset() ; pero JavaScript nativo lo hace. Entonces, convierta el elemento jQuery en un objeto de JavaScript usando:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Solo puede agregar un tipo de entrada = restablecer con una id = restablecer de esta manera
<html>
<form>
<input type = ''reset'' id = ''resetform'' value = ''reset''/>
<!--Other items in the form can be placed here-->
</form>
</html>
luego, con jquery simplemente use 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 restablecimiento con id = resetform usando su css
<style>
#resetform
{
display:none;
}
</style>
Tu código debería funcionar. Asegúrese de que static/jquery-1.9.1.min.js existe. Además, puede intentar revertir a static/jquery.min.js . Si eso soluciona el problema, entonces has identificado el problema.
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 está, 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.
Usando la función jquery .closest (elemento) y .find (...) .
Conseguir el elemento padre y buscar al niño .
Finalmente, haz la función necesaria.
$("#form").closest(''form'').find("input[type=text], textarea").val("");
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'');
});
puede intentar usar el enlace de referencia del activador ()
$(''#form_id'').trigger("reset");
$(''#configreset'').click(function(){
$(''#configform'')[0].reset();
});
Ponlo en el violín de JS. Trabajó según lo previsto.
Por lo tanto, ninguno de los problemas mencionados tiene la culpa aquí. Tal vez usted está teniendo un problema de identificación en conflicto? ¿Se está ejecutando realmente el clic?
Edición: (porque soy un saco triste sin la capacidad adecuada para comentar) No es un problema directamente con tu código. Funciona bien cuando lo sacas del contexto de la página que estás utilizando actualmente, así que, en lugar de que sea algo con los datos de formulario jQuery / javascript y atribuidos particulares, tiene que ser otra cosa. Comenzaría a dividir el código a su alrededor y tratar 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á apuntando a la forma correcta ...
y si lo es, tiene que ser algo que no esté listado aquí.
Edita la parte 2: una cosa que puedes intentar (si no está apuntando correctamente) es usar "input: reset" en lugar de lo que estás usando ... también, sugeriría porque no es el objetivo el que está trabajando incorrectamente para averiguarlo lo que el clic real es la orientación. Simplemente abre las herramientas de firebug / desarrollador, te pido, tira
console.log($(''#configreset''))
y ver que aparece. Y luego podemos ir desde allí.
reset(){
this.companyForm["enable"] = true;
jQuery(''has-success'').each(function () {
jQuery(this).removeClass(''has-success'');
});
jQuery(''.has-error'').each(function () {
jQuery(this).removeClass(''has-error'');
});
jQuery(''.has-feedback'').each(function () {
jQuery(this).removeClass(''has-feedback'');
});
jQuery(''.help-block'').each(function () {
jQuery(this).hide();
});
jQuery(''.form-control-feedback'').each(function () {
jQuery(this).hide();
});
}
<button type="reset">Reset</reset>
La forma más simple en que puedo pensar es robusto. Coloque dentro de la etiqueta de formulario.