Restablecer un formulario de varias etapas con jQuery


349

Tengo un formulario con un botón de reinicio estándar codificado de esta manera:

<input type="reset" class="button standard" value="Clear" />

El problema es que dicho formulario es de varias etapas, por lo que si un usuario llena una etapa y luego regresa más tarde, los valores 'recordados' para los diversos 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 el truco. Ya estoy usando jQuery dentro del formulario, pero solo 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.


1
@ da5id: ¡Algo a tener en cuenta es que mi aceptado también está vaciando elementos ocultos! Probablemente no desee esto, así que solo agregue: oculto a not()si su formulario tiene entradas ocultas.
Paolo Bergantino

Gracias Paulo, muy buen punto que tendré en cuenta.
da5id

2
Para cualquiera que busque una buena respuesta, tenga cuidado. La respuesta aceptada está en el camino correcto pero tiene errores. La respuesta más votada hasta ahora no entendió la pregunta. Muchas otras respuestas también malinterpretaron y confundieron el reinicio con blanco / claro .

1
Mystkine tiene razón: tanto la pregunta como la respuesta actualmente aceptada combinan el borrado con el reinicio : creo que el interlocutor realmente estaba buscando una solución de reinicio de formulario de varias etapas, a pesar del título original, he actualizado el título en consecuencia.
Yarin

hep hep, a pesar de la edad de esta pregunta, he agregado una nueva respuesta que realmente restablece partes arbitrarias de un formulario ... stackoverflow.com/questions/680241/…
kritzikratzi

Respuestas:


502

actualizado en marzo de 2012.

Entonces, dos años después de que originalmente respondí esta pregunta, regreso para ver que se ha convertido en un gran desastre. Siento que es hora de que vuelva y haga que mi respuesta sea realmente correcta, ya que es la más votada + aceptada.

Para el registro, la respuesta de Titi es incorrecta, ya que no es lo que pedía el póster original: es correcto que sea posible restablecer un formulario utilizando el método reset () nativo, pero esta pregunta está tratando de borrar un formulario de lo recordado valores que permanecerían en el formulario si lo restablece de esta manera. Es por eso que se necesita un reinicio "manual". Supongo que la mayoría de las personas terminaron en esta pregunta 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 para muchos casos, incluido el OP, pero como se señaló en los comentarios y en otras respuestas, eliminará 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

El uso de los :text, :radio, etc. selectores de por sí se considera una mala práctica por jQuery, ya que terminan la evaluación a *:textla que hace que sea mucho más largo de lo que debería. Prefiero el enfoque de la 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 de formulario, esto debería convertirlo en la mejor respuesta 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 tan genérico como se va a obtener y esto debería manejarse caso por caso .


2
Eso: la entrada es útil ... ahora sé que usaré. Gracias Paolo :) +1
alex

Muy bien, saludos, pero ¿esto también borrará los valores de mis botones? No puedo probar hasta más tarde.
da5id

1
En este punto, creo que sería mejor simplemente enumerar los que DESEA vaciar, por lo que en lugar de: ingresar en la primera línea que haga ": texto,: seleccionar,: radio,: casilla de verificación"
Paolo Bergantino

3
Un problema aquí es que .val('')restablece todos los valores ''incluso si estos valores se usan en botones de radio y casillas de verificación. Entonces, cuando ejecuto el código anterior, pierdo información valiosa del formulario, no solo lo que el usuario ha ingresado.
jeffery_the_wind

3
Parece que hay un pequeño problema con esta solución: la entrada: correo electrónico, devuelve un error: Error: error de sintaxis, expresión no reconocida: pseudo no admitido: correo electrónico
Spencer Mark

390

Desde http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

$('#myform')[0].reset();

la configuración myinput.val('')podría no emular "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 lo establecería en una cadena vacía, mientras que llamar myform.reset()lo restablecería a su valor inicial de 50.


44
gracias, esta es una excelente manera de borrar un formulario que contiene: input type = "file".
neoneye

27
Creo que 34 personas han entendido mal cuál es la pregunta aquí. El autor de la pregunta conoce el restablecimiento, el formulario se "restablecerá" a los valores que su script está recordando y necesita forzarlos a que se borren.
Paolo Bergantino

48

Hay un gran problema con la respuesta aceptada de Paolo. Considerar:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

La .val('')línea también borrará valuelas asignadas a casillas de verificación y botones de radio. Entonces, si (como yo) haces algo como esto:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

El uso de la respuesta aceptada transformará sus entradas en:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

¡Vaya! ¡Estaba usando ese valor!

Aquí hay una versión modificada que mantendrá su casilla de verificación y valores de radio:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

1
Por alguna razón, esto no funciona para mí en selectelementos. ¿Puedes arreglar esto?
Pentium10

2
$ (': input,: select', '#myFormId'). removeAttr ('marcado'). removeAttr ('selected'); debería funcionar
sakhunzai

Esta es la respuesta correcta. Si usa la respuesta aceptada, el formulario se borra después de enviar. Sin embargo, si desea enviar el formulario nuevamente, no se capturará ninguno de los datos de su casilla de verificación o botón de radio, ya que sus atributos de valor se borrarán.
djblue2009

He actualizado mi respuesta para hacer frente a todo esto, el suyo es mayormente correcta aparte del hecho de jQuery fuertemente desalienta el uso :text, :passwordetc. selectores por sí mismos, sin especificar la inputparte, de lo contrario, se evalúa como *:textque pasa por cada elemento en el documento en lugar de sólo <input>las etiquetas coninput:text
Paolo Bergantino

@ paolo-bergantino Tu crítica es incorrecta. Mis ejemplos son de alcance los elementos a inspeccionar usando el #myFormIdcontexto pasado como el segundo argumento de $()- que es $(':input', '#context')- esta es idéntica a$('#context').filter(':input')
leepowers

16

Complemento jQuery

Creé un complemento jQuery para poder usarlo fácilmente en cualquier lugar que lo necesite:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

Entonces ahora puedo usarlo llamando:

$('#my-form').clear();

1
Esta respuesta es la mejor OMI. ¿Debería incluir también .prop("checked", false)? stackoverflow.com/questions/5874652/prop-vs-attr
Luke

14

Borrar formas es un poco complicado y no tan simple como parece.

Le sugerimos que use el complemento de formulario jQuery y use su funcionalidad clearForm o resetForm . Se encarga de la mayoría de los casos de esquina.


$ ('# form_id'). clearForm (); es justo lo que necesitaba, ¡gracias! "Borra los elementos del formulario. Este método vacía todas las entradas de texto, entradas de contraseña y elementos de área de texto, borra la selección en cualquier elemento seleccionado y desmarca todas las entradas de radio y casilla de verificación". (resetForm, por otro lado, "Restablece el formulario a su estado original invocando el método DOM nativo del elemento de formulario".)
Tyler Rick

14

document.getElementById ('frm'). reset ()


11
si eres fanático de jQuery, esto podría reescribirse a: $ ('frm') [0] .reset ()
dmitko

8
@dmitko Solo eche un vistazo al nombre de usuario de los carteles
Philipp M

1
Si bien esta es una buena solución para restablecer un formulario, en realidad no es la solución a la pregunta que se hace.
Lucas

13

Yo suelo hacer:

$('#formDiv form').get(0).reset()

o

$('#formId').get(0).reset()

5

Aquí hay algo para que comiences

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

Por supuesto, si tiene casillas de verificación / botones de opción, deberá modificar esto para incluirlos también y establecer .attr({'checked': false});

editar La respuesta de Paolo es más concisa. Mi respuesta es más prolija porque no sabía sobre el :inputselector, ni pensé en simplemente eliminar el atributo marcado.



4

Me parece que esto funciona bien.

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

excepto que no funciona para casillas de verificación, botones de radio y selecciones.
kritzikratzi

4

Básicamente, ninguna de las soluciones proporcionadas me hace feliz. Como señalaron algunas personas, vacían el formulario en lugar de restablecerlo.

Sin embargo, hay algunas propiedades de JavaScript que ayudan:

  • defaultValue para campos de texto
  • Por defecto Marcado para casillas de verificación y botones de radio
  • defaultSeleccionado para seleccionar opciones

estos almacenan el valor que tenía un campo cuando se cargaba la página.

escribir un complemento jQuery ahora es trivial: (para los impacientes ... aquí hay una demostración http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

código de complemento

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

uso

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

algunas notas ...

  • No he examinado los nuevos elementos de formulario html5, algunos podrían necesitar un tratamiento especial, pero la misma idea debería funcionar.
  • Los elementos deben ser referenciados directamente. Es decir $( "#container" ).resetValue(), no funcionará. siempre use $( "#container :input" )en su lugar.
  • como se mencionó anteriormente, aquí hay una demostración: http://jsfiddle.net/kritzikratzi/N8fEF/1/

4

Puede encontrar que esto es realmente más fácil de resolver sin jQuery.

En JavaScript normal, esto es tan simple como:

document.getElementById('frmitem').reset();

Intento recordar siempre que, si bien usamos jQuery para mejorar y acelerar nuestra codificación, a veces no es más rápido. En esos casos, a menudo es mejor usar otro método.


4

Hice una ligera variación de la buena solución de Francis Lewis . Lo que su solución no hace es establecer las selecciones desplegables en blanco. (Creo que cuando la mayoría de la gente quiere "borrar", probablemente quieren que todos los valores estén vacíos). Este lo hace con .find('select').prop("selectedIndex", -1).

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

2

Normalmente agrego un botón de reinicio oculto al formulario. cuando sea necesario solo: $ ('# reset'). click ();


1
¿Por qué responde una publicación que ha sido respondida y aprobada hace más de 2 años? E incluyendo esto, tu publicación también es de baja calidad
Rene Pot

Esto es mucho más oscuro que simplemente llamar directamente a form.reset (). No hay necesidad de este truco.
kritzikratzi

2

Modificación de la respuesta más votada para la $(document).ready()situación:

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

2

Simplemente usa el me jQuery Trigger eventgusta así:

$('form').trigger("reset");

Esto restablecerá casillas de verificación, botones de radio, cuadros de texto, etc. Esencialmente cambia su formulario a su estado predeterminado. Simplemente ponga el #ID, Class, elementinterior del jQueryselector.


1

esto funcionó para mí, la respuesta de pyrotex no 'restableció los campos seleccionados, tomó su, aquí' mi edición:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);

1

Estoy usando la solución Paolo Bergantino, que es genial pero con pocos ajustes ... Específicamente para trabajar con el nombre del formulario en lugar de una identificación.

Por ejemplo:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

Ahora cuando quiero usarlo podría hacer

<span class="button" onclick="jqResetForm('formName')">Reset</span>

Como puede ver, esto funciona con cualquier forma, y ​​como estoy usando un estilo CSS para crear el botón, la página no se actualizará al hacer clic. Una vez más, gracias a Paolo por su aporte. El único problema es si tengo valores predeterminados en el formulario.


1

Usé la solución a continuación y funcionó para mí (mezclando JavaScript tradicional con jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

1

Soy solo un intermediario en PHP y un poco flojo para sumergirme en un nuevo lenguaje como JQuery, pero ¿no es la siguiente una solución simple y elegante?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

No puedo ver una razón por la que no tengo dos botones de envío, solo que con diferentes propósitos. Entonces simplemente:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

Simplemente redefine sus valores a lo que se supone que es el valor predeterminado.


0

Un método que utilicé en un formulario bastante grande (más de 50 campos) fue simplemente volver a cargar el formulario con AJAX, básicamente haciendo una llamada al servidor y simplemente devolviendo los campos con sus valores predeterminados. Esto es mucho más fácil que intentar tomar cada campo con JS y luego configurarlo en su valor predeterminado. También me permitió mantener los valores predeterminados en un solo lugar: el código del servidor. En este sitio, también hubo algunos valores predeterminados diferentes según la configuración de la cuenta y, por lo tanto, no tuve que preocuparme por enviarlos a JS. El único pequeño problema con el que tuve que lidiar fueron algunos campos de sugerencias que requerían inicialización después de la llamada AJAX, pero no fue un gran problema.


0

Todas estas respuestas son buenas, pero la forma más fácil de hacerlo es con un reinicio falso, es decir, utiliza un enlace y un botón de reinicio.

Simplemente agregue un poco de CSS para ocultar su botón de reinicio real.

input[type=reset] { visibility:hidden; height:0; padding:0;}

Y luego en su enlace agrega lo siguiente

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

¡Espero que esto ayude! A.


0
<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

0

Aquí con la actualización de casillas de verificación y selecciona:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

0

Estaba teniendo el mismo problema y la publicación de Paolo me ayudó, pero necesitaba ajustar una cosa. Mi formulario con id advancedindexsearch solo contenía campos de entrada y obtiene los valores de una sesión. Por alguna razón, lo siguiente no funcionó para mí:

$("#advancedindexsearch").find("input:text").val("");

Si pongo una alerta después de esto, vi que los valores se eliminaron correctamente pero luego se reemplazaron nuevamente. Todavía no sé cómo ni por qué, pero la siguiente línea me sirvió:

$("#advancedindexsearch").find("input:text").attr("value","");

0

La respuesta de Paolo no tiene en cuenta los recolectores de fechas, agregue esto en:

$form.find('input[type="date"]').val('');

0

He mejorado un poco la respuesta original de Paolo Bergantino.

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

De esta manera, puedo pasar cualquier elemento de contexto a la función. Puedo restablecer todo el formulario o solo un determinado conjunto de campos, por ejemplo:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

Además, se conservan los valores predeterminados de las entradas.


0

Aquí está mi solución, que también funciona con los nuevos tipos de entrada html5:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

1
Debe mover los breaksiguientes checkboxy los radiocasos. No es necesario en su posición actual.
bergie3000

0

Complementando la respuesta aceptada, si usa el complemento SELECT2, debe recuperar el script select2 para hacer cambios en todos los campos select2:

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }

-1
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
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.