El restablecimiento de un multi-etapa formulario con jQuery

Question

Tengo un formulario con un estándar botón de reset codificados de esta manera:

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

El problema es que, en dicho formulario es de la multi-etapa, tipo, así que si un usuario rellena un escenario y, a continuación, vuelve más tarde, el 'recordado' valores para los distintos campos no restablecerá cuando el botón es pulsado.

Estoy pensando que adjuntar una función jQuery para recorrer todos los campos y claro ellos 'manualmente' haría el truco.Ya estoy utilizando jQuery dentro de la forma, pero soy sólo acaba de levantarse a la velocidad y por lo que no estoy seguro de cómo ir sobre esto, otros que de forma individual referenciando cada campo ID, que no parece muy eficiente.

TIA por cualquier ayuda.

Answer 1

actualizado en Marzo de 2012.

Así, dos años después de que inicialmente respondieron a esta pregunta vuelvo a ver que prácticamente se ha convertido en un gran lío.Creo que es hora que he llegado de nuevo a él y hacer que mi respuesta verdaderamente correcta ya que es el más upvoted + aceptados.

Para el registro, Titi la respuesta es incorrecta, ya que no es lo que el cartel original pidió - es cierto que es posible restablecer un formulario con los nativos método reset (), pero esta cuestión es tratar de aclarar una forma de recordar los valores que permanecen en el formulario si se restablece de esta manera.Esta es la razón por la que un "manual" reset es necesario.Asumo que la mayoría de la gente terminó en esta cuestión 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 de la OP está hablando.

Mi original la respuesta fue esta:

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

Que podría funcionar para una gran cantidad de casos, incluyendo para el OP, pero como se señaló en los comentarios y en otras respuestas, la voluntad clara de radio/casilla de verificación de los elementos de cualquiera de los atributos de valor.

Más correcto respuesta (pero no perfecto) 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 la :text, :radio, etc.selectores de por sí se considera de mala práctica por jQuery que acaban de evaluación a *:text lo que hace es tomar mucho más tiempo de lo que debería.Yo prefiero el de la lista blanca de enfoque y deseo que yo había usado en mi respuesta original.De todos modos, especificando el input parte de la selección, además de la caché del elemento del formulario, esto debería hacer el mejor rendimiento de respuesta aquí.

Esta respuesta podría todavía tiene algunos defectos, si la gente predeterminado para seleccionar elementos no es una opción que tiene un valor en blanco, pero sin duda es tan genérica como se va a obtener y esto tendría que ser manejado en un caso-por-caso.

Answer 2

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

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

myinput.val('') configuración puede no emular "reset" 100% si tiene una entrada como esta:

<input name="percent" value="50"/>

Por ejemplo, llamando myinput.val('') en una entrada con un valor por defecto de 50 fijaría a una cadena vacía, mientras que llamando myform.reset() sería restablecer a su valor inicial de 50.

Answer 3

Hay un gran problema con la respuesta aceptada de Paolo. Considere lo siguiente:

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

La .val('') línea también se borrará ninguna de value asignado a casillas de verificación y botones de radio. Así que si (como yo) se hace 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" />

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 - yo estaba usando ese valor

Aquí hay una versión modificada que mantendrá sus valores de casilla de verificación y 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');

Answer 4

Plugin jQuery

He creado un plugin de jQuery para que pueda utilizarlo 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;
}; 

Así que ahora puedo utilizarlo llamando a:

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

Answer 5

formas de compensación es un poco complicado y no es tan simple como parece.

sugerimos que utilice la jQuery plugin de forma y utilizar su clearForm o resetForm funcionalidad. Se encarga de la mayor parte de los casos de esquina.

Answer 6

document.getElementById ( 'frm'). Reset ()

Answer 7

Yo suelo hacer:

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

o

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

Answer 8

Considere el uso de la validación de plug-in - es genial! Y la forma de reseteo es simple:

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

Answer 9

Aquí hay algo para que pueda empezar

$('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 usted tiene casillas de verificación / botones de radio, tendrá que modificar este incluirlos también y establecer .attr({'checked': false});

editar de Paolo respuesta es más concisa. Mi respuesta es más prolijo porque yo no sabía sobre el selector :input, ni pienso en la simple eliminación del atributo comprobado.

Answer 10

Me parece que funciona bien.

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

Answer 11

básicamente no de las soluciones aportadas me hace feliz. como se ha señalado por unas pocas personas, y despejarán la forma en lugar de ponerlo a cero.

Sin embargo, hay algunas propiedades que ayudan a cabo javascript:

• defaultValue para campos de texto
• defaultChecked de casillas de verificación y botones de radio
• defaultSelected para seleccionar las opciones

éstos almacenan el valor que tenía un campo cuando se carga la página.

escribir un plugin de jQuery ahora es trivial: (Para los impacientes ... he aquí una demostración http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

plug-in de código

(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 mirado en los nuevos elementos de formulario HTML 5, 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á. utilice siempre $( "#container :input" ) lugar.
• como se mencionó anteriormente, aquí hay una demostración: http://jsfiddle.net/kritzikratzi/N8fEF/ 1 /

Answer 12

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

En JavaScript regular, esto es tan simple como:

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

Trato de recordar siempre que, durante el uso de jQuery para mejorar y acelerar nuestra codificación, a veces no es realmente más rápido. En esos casos, a menudo es mejor utilizar otro método.

Answer 13

Hice una ligera variación del Francis Lewis buena solución . Lo que su solución no hace es establecer el desplegable selecciona a blanco. (Creo que la mayoría de la gente quiere "claro", es probable que quieran realizar todos los valores vacíos.) Éste 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;
};

Answer 14

Normalmente añadir un botón de reinicio oculto al formulario. solo cuando sea necesario:     $ ( '# Reset') haga clic en ().;

Answer 15

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

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

Answer 16

Sólo tiene que utilizar el jQuery Trigger event este modo:

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

Esto restablecerá casillas de verificación, botones de radio, cuadros de texto, etc ... En esencia se convierte a su forma a su estado por defecto. En pocas palabras el #ID, Class, element dentro del selector de jQuery.

Answer 17

Esto funcionó para mí, la respuesta pyrotex didn 'reset seleccione los campos, tomó su, aquí está 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);

Answer 18

Estoy usando Paolo Bergantino solución que es grande, pero con algunos retoques...Específicamente para trabajar con el nombre del formulario en lugar de un identificador.

Por ejemplo:

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

Ahora cuando quiero usar una podría hacer

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

Como se puede ver, este trabajo con los de cualquier forma, y ya que estoy usando un estilo css para crear el botón de la página no se actualizará cuando se hace clic.Una vez más, gracias Paolo por tu aporte.El único problema es que si tengo valores por defecto en el formulario.

Answer 19

He utilizado la solución de abajo y funcionó para mí (mezcla tradicional Javascript con jQuery)

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

Answer 20

Sólo soy un intermedio en PHP, y un poco perezoso a sumergirse en un nuevo idioma como jQuery, pero no es la raíz de una solución simple y elegante?

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

No se puede ver una razón por qué no tener dos botones de envío, sólo con propósitos diferentes. Después, simplemente:

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

Usted acaba de redefinir sus valores de nuevo a lo que el defecto se supone que es.

Answer 21

Un método que utilicé en una forma bastante grande (más de 50 campos) era simplemente recargar el formulario con AJAX, básicamente, hacer una llamada de vuelta al servidor y que acaban de volver los campos con sus valores por defecto. Este hecho es mucho más fácil que tratar de agarrar cada campo con JS y luego ajustarlo a su valor por defecto. También permitió a mí para mantener los valores por defecto en un solo lugar - el código del servidor. En este sitio, también hubo algunos valores predeterminados diferentes en función de la configuración de la cuenta y por lo tanto no tiene que preocuparse por el envío de éstos a JS. El único problema que tenía que hacer frente a algunos sugieren eran campos que requerían inicialización después de la llamada AJAX, pero no es un gran problema.

Answer 22

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

Sólo tiene que añadir un poco de CSS para ocultar su verdadera botón de reinicio.

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

Y a continuación, en su enlace se agrega la siguiente manera

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

Answer 23

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

Answer 24

A continuación, con la actualización para las 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');

Answer 25

Yo estaba teniendo el mismo problema y el cargo de Paolo me ayudaron, pero necesitaba para ajustar una cosa. Mi forma con advancedindexsearch Identificación sólo contenía campos de entrada y obtiene los valores de una sesión. Por alguna razón, la siguiente no funcionó para mí:

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

Si pongo una alerta después de esto, vi a los valores en que se retira correctamente pero después fueron reemplazados de nuevo. Todavía no sé cómo ni por qué, pero la línea siguiente hice el truco para mí:

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

Answer 26

La respuesta de Paolo no tiene en cuenta selectores de fecha, agregue esto:

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

Answer 27

Hice una pequeña mejora en 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. Soy capaz de restablecer el formulario completo o sólo un cierto conjunto de campos, por ejemplo:

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

Plus, se retienen los valores por defecto de las entradas.

Answer 28

aquí está mi solución, que también trabaja con el nuevo HTML5 de entrada-tipos:

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

Answer 29

Como complemento a la respuesta aceptada, si utiliza SELEC.2 plug-in, es necesario recordar la escritura select2 para hacer cambios es todos los campos seleccionar 2:

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

Answer 30

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