trigger - Restablecimiento de un formulario de etapas múltiples con jQuery
reset all forms (30)
actualizado en marzo de 2012.
Entonces, dos años después de haber respondido originalmente a esta pregunta, vuelvo para ver que se ha convertido en un gran desastre. Siento que es hora de volver a eso y hacer 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 solicitó el póster original; es correcto que sea posible restablecer un formulario utilizando el método de restablecimiento nativo (), pero esta pregunta está intentando borrar un formulario del recordado. Valores que permanecerían en el formulario si lo restablece de esta manera. Es por esto que se necesita 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 para muchos casos, incluso para el OP, pero como se señala en los comentarios y en otras respuestas, borrará los elementos de la casilla de verificación / radio 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 selectores :text :radio , etc. por sí mismos se considera una mala práctica por parte de jQuery, ya que terminan evaluándose en *:text que hace que tome mucho más tiempo del que debería. Prefiero el enfoque de la lista blanca y desearía haberlo utilizado en mi respuesta original. De todos modos, al especificar la parte de input del selector, más la memoria caché del elemento de formulario, esto debería ser la mejor respuesta aquí.
Esta respuesta podría tener algunas fallas 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 .
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 dicha forma es de ordenación en varias etapas, por lo que si un usuario completa una etapa y luego regresa, los valores "recordados" de 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 eliminarlos ''manualmente'' haría el truco. Ya estoy usando jQuery dentro del formulario, pero solo estoy poniéndome al día y no estoy seguro de cómo hacerlo, aparte de hacer referencia individual a cada campo por ID, lo que no parece muy eficiente.
TIA por cualquier ayuda.
Aquí con la actualización de 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'');
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;
}
});
}
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 radio, deberá modificar esto para incluirlos también y configurar .attr({''checked'': false});
Editar la respuesta de Paolo es más concisa. Mi respuesta es más amplia porque no conocía el selector de :input , ni pensé simplemente en eliminar el atributo marcado.
Básicamente ninguna de las soluciones proporcionadas me hace feliz. Como lo señalaron algunas personas, vacían el formulario en lugar de restablecerlo.
sin embargo, hay algunas propiedades de javascript que ayudan:
- valor predeterminado para los campos de texto
- defaultChecked para casillas de verificación y botones de radio
- predeterminadoSeleccionado para seleccionar opciones
estos almacenan el valor que tenía un campo cuando se cargó la página.
escribir un complemento de jQuery ahora es trivial: (para los impacientes ... aquí hay una demostración http://jsfiddle.net/kritzikratzi/N8fEF/1/ )
código de plugin
(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 del formulario html5, algunos pueden 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" )lugar. - como se mencionó anteriormente, aquí hay una demostración: http://jsfiddle.net/kritzikratzi/N8fEF/1/
Borrar formularios es un poco complicado y no es tan simple como parece.
Le sugerimos que use el complemento de formulario jQuery y que use su funcionalidad clearForm o resetForm . Se encarga de la mayoría de los casos de esquina.
Complementando la respuesta aceptada, si usa el complemento SELECT2, necesita recordar el script select2 para realizar 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();
}
Considere usar el complemento de validación , ¡es genial! Y restablecer la forma es simple:
var validator = $("#myform").validate();
validator.resetForm();
De http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :
$(''#myform'')[0].reset();
establecer myinput.val('''') podría no emular "reset" al 100% si tiene una entrada como esta:
<input name="percent" value="50"/>
Por ejemplo, llamar a myinput.val('''') en una entrada con un valor predeterminado de 50 lo establecería en una cadena vacía, mientras que llamar a myform.reset() lo restablecería a su valor inicial de 50.
Encuentro que esto funciona bien.
$(":input").not(":button, :submit, :reset, :hidden").each( function() {
this.value = this.defaultValue;
});
Estaba teniendo el mismo problema y el post 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 me funcionó:
$("#advancedindexsearch").find("input:text").val("");
Si pongo una alerta después de esto, veo que los valores fueron eliminados correctamente pero luego fueron reemplazados nuevamente. Todavía no sé cómo ni por qué, pero la siguiente línea hizo el truco por mí:
$("#advancedindexsearch").find("input:text").attr("value","");
Estoy usando la solución de Paolo Bergantino, que es genial pero con pocos ajustes ... Específicamente para trabajar con el nombre del formulario en lugar de un ID.
Por ejemplo:
function jqResetForm(form){
$('':input'',''form[name=''+form+'']'')
.not('':button, :submit, :reset, :hidden'')
.val('''')
.removeAttr(''checked'')
.removeAttr(''selected'');
}
Ahora cuando quiero usarlo podria hacer
<span class="button" onclick="jqResetForm(''formName'')">Reset</span>
Como puede ver, esto funciona con cualquier formulario, y debido a que estoy usando un estilo css para crear el botón, la página no se actualizará cuando se haga clic. Una vez más gracias a Paolo por tu aporte. El único problema es si tengo valores predeterminados en el formulario.
Hay un gran problema con la respuesta aceptada de Paolo. Considerar:
$('':input'',''#myform'')
.not('':button, :submit, :reset, :hidden'')
.val('''')
.removeAttr(''checked'')
.removeAttr(''selected'');
La línea .val('''') también borrará cualquier value asignado a las casillas de verificación y los botones de radio. Así que 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 los 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'');
Hice una ligera variación de la buena solución de Francis Lewis . Lo que su solución no hace es configurar los menús desplegables en blanco. (Creo que cuando la mayoría de la gente quiere "borrar", es probable que quieran vaciar todos los valores). 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;
};
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. 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.
La respuesta de Paolo no tiene en cuenta los recolectores de fechas, agregue esto en:
$form.find(''input[type="date"]'').val('''');
Modificación de la respuesta más votada para 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();
});
Normalmente agrego un botón de reinicio oculto al formulario. cuando sea necesario solo: $ (''# reset''). click ();
Por lo general hago
$(''#formDiv form'').get(0).reset()
o
$(''#formId'').get(0).reset()
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, 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.
Simplemente use el jQuery Trigger event así:
$(''form'').trigger("reset");
Esto restablecerá las casillas de verificación, botones de radio, cuadros de texto, etc ... Esencialmente, convierte su formulario a su estado predeterminado. Simplemente coloque el elemento #ID, Class, element dentro del selector jQuery .
Soy solo un intermediario en PHP, y un poco perezoso para sumergirme en un nuevo lenguaje como JQuery, ¿pero no es el siguiente 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 la cual no se tienen dos botones de envío, solo con propósitos diferentes. Entonces simplemente:
if ($_POST[''submitreset'']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }
Simplemente redefine sus valores a lo que se supone que sea el valor predeterminado.
Todas estas respuestas son buenas, pero la forma más sencilla de hacerlo es con un reinicio falso, es decir, se usa un enlace y un botón de reinicio.
Solo agrega algo de CSS para ocultar tu botón de reinicio real.
input[type=reset] { visibility:hidden; height:0; padding:0;}
Y luego en su enlace usted 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.
Un método que usé en un formulario bastante grande (más de 50 campos) fue simplemente volver a cargar el formulario con AJAX, básicamente, hacer una llamada al servidor y devolver los campos con sus valores predeterminados. Esto es mucho más fácil que intentar capturar cada campo con JS y luego establecerlo 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 había algunos valores predeterminados diferentes según la configuración de la cuenta y, por lo tanto, no tenía que preocuparme por enviarlos a JS. El único problema pequeño con el que tuve que lidiar fue algunos campos de sugerencias que requerían la inicialización después de la llamada AJAX, pero no es un gran problema.
Utilicé 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);
})
document.getElementById (''frm''). reset ()
esto funcionó para mí, la respuesta de pirotex no restableció los campos de selección, 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);
jQuery Plugin
Creé un complemento de 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;
};
Así que ahora puedo usarlo llamando:
$(''#my-form'').clear();
$(this).closest(''form'').find(''input,textarea,select'').not('':image'').prop(''disabled'', true);
<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>