Restablecer un formulario de varias etapas con jQuery

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.

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 .

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.

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

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

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.

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

Yo suelo hacer:

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

o

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

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.

Considere usar el complemento de validación , ¡es genial! Y restablecer la forma es simple:

var validator = $("#myform").validate();
validator.resetForm();

Me parece que esto funciona bien.

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

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/

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.

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;
};

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

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

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.

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

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.

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

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.

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.

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.

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

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

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

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

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

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.

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

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

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);