Restablecer un formulario de varias etapas con jQuery
Tengo un formulario con un botón de reinicio estándar codificado de la siguiente manera:
<input type="reset" class="button standard" value="Clear" />
El problema es que dicho formulario es del tipo de varias etapas, por lo que si un usuario completa una etapa y luego regresa más tarde, los valores "recordados" para los distintos campos no se restablecerán cuando se haga clic en el botón Borrar.
Estoy pensando que adjuntar una función jQuery para recorrer todos los campos y borrarlos "manualmente" sería suficiente. Ya estoy usando jQuery en el formulario, pero apenas me estoy poniendo al día y no estoy seguro de cómo hacerlo, aparte de hacer referencia individualmente a cada campo por ID, lo que no parece muy eficiente.
TIA por cualquier ayuda.
actualizado en marzo de 2012.
Entonces, dos años después de que respondí originalmente esta pregunta, vuelvo y veo que prácticamente se ha convertido en un gran desastre. Siento que ya es hora de volver a eso y hacer que mi respuesta sea realmente correcta, ya que es la más votada y aceptada.
Para que conste, la respuesta de Titi es incorrecta ya que no es lo que pidió el cartel original; es correcto que es posible restablecer un formulario utilizando el método nativo reset(), pero esta pregunta intenta borrar un formulario de lo recordado. valores que permanecerían en el formulario si lo restableciera de esta manera. Por eso es necesario un reinicio "manual". Supongo que la mayoría de las personas terminaron en esta pregunta a partir de una búsqueda en Google y realmente están buscando el método reset(), pero no funciona para el caso específico del que habla el OP.
Mi respuesta original fue esta:
// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
Lo que podría funcionar en muchos casos, incluso para el OP, pero como se señala en los comentarios y en otras respuestas, borrará los elementos de radio/casilla de verificación de cualquier atributo de valor.
Una respuesta más correcta (pero no perfecta) es:
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name
Usar los selectores :text, :radio, etc. por sí solos se considera una mala práctica por parte de jQuery, ya que terminan evaluando lo *:textque hace que tarde mucho más de lo debido. Prefiero el enfoque de lista blanca y desearía haberlo usado en mi respuesta original. De todos modos, al especificar la inputparte del selector, más el caché del elemento del formulario, esto debería convertirla en la respuesta con mejor rendimiento aquí.
Esta respuesta aún podría tener algunos defectos si el valor predeterminado de las personas para los elementos seleccionados no es una opción que tenga un valor en blanco, pero ciertamente es lo más genérico posible y esto debería manejarse caso por caso. .
Simplemente haz esto
$('#myform')[0].reset();
Más información
Es posible que la configuración myinput.val('')no emule "restablecer" al 100% si tiene una entrada como esta:
<input name="percent" value="50"/>
Por ejemplo, llamar myinput.val('')a una entrada con un valor predeterminado de 50 la establecería en una cadena vacía, mientras que llamarla myform.reset()la restablecería a su valor inicial de 50.
