Réinitialisation d’un formulaire à plusieurs étapes avec jQuery

mis à jour en mars 2012.

Donc, deux ans après avoir répondu à cette question, je me suis rendu compte qu’il s’agissait d’un gros gâchis. Je pense qu’il est temps que j’y revienne et que ma réponse soit vraiment correcte car c’est la plus acceptée et la plus acceptée.

Pour la petite histoire, la réponse de Titi est fausse car ce n’est pas ce que l’affiche originale demandait – il est exact qu’il est possible de réinitialiser un formulaire en utilisant la méthode reset () native, mais cette question essaie de supprimer un formulaire de rappel valeurs qui restraient dans le formulaire si vous le réinitialisez de cette façon. C’est pourquoi une réinitialisation “manuelle” est nécessaire. Je suppose que la plupart des gens se sont retrouvés dans cette question à partir d’une recherche Google et recherchent vraiment la méthode reset (), mais cela ne fonctionne pas pour le cas spécifique dont parle l’OP.

Ma réponse originale était la suivante:

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

Ce qui pourrait fonctionner dans de nombreux cas, y compris pour l’OP, mais comme indiqué dans les commentaires et dans d’autres réponses, effacera les éléments radio / checkbox de tous les atsortingbuts de valeur.

Une réponse plus correcte (mais pas parfaite) est:

 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 

L’utilisation des sélecteurs :text :radio , etc. par eux-mêmes est considérée comme une mauvaise pratique par jQuery au fur et à mesure qu’ils finissent par évaluer *:text qui le fait prendre beaucoup plus de temps que prévu. Je préfère l’approche par liste blanche et souhaite l’avoir utilisée dans ma réponse d’origine. Quoi qu’il en soit, en spécifiant la partie d’ input du sélecteur, plus le cache de l’élément de formulaire, cela devrait en faire la meilleure réponse ici.

Cette réponse peut encore présenter certaines failles si la valeur par défaut des éléments sélectionnés n’est pas une option qui a une valeur vide, mais elle est certainement aussi générique que possible et cela doit être traité au cas par cas. .

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

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

La configuration de myinput.val('') peut ne pas émuler “reset” à 100% si vous avez une entrée comme celle-ci:

Par exemple, appeler myinput.val('') sur une entrée avec une valeur par défaut de 50 le définirait comme une chaîne vide, tandis que l’appel de myform.reset() le réinitialiserait à sa valeur initiale de 50.

Il y a un gros problème avec la réponse acceptée de Paolo. Considérer:

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

La ligne .val('') également toutes les value affectées aux cases à cocher et aux boutons radio. Donc, si (comme moi) tu fais quelque chose comme ça:

L’utilisation de la réponse acceptée transformera vos données en:

Oups – J’utilisais cette valeur!

Voici une version modifiée qui conservera vos valeurs de case à cocher et 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'); 

La suppression des formulaires est un peu délicate et pas aussi simple que cela en a l’air.

Proposez que vous utilisiez le plug – in de formulaire jQuery et utilisiez sa fonctionnalité clearForm ou resetForm . Il prend en charge la plupart des cas de coin.

document.getElementById (‘frm’). reset ()

Plugin jQuery

J’ai créé un plugin jQuery pour pouvoir l’utiliser facilement partout où j’en ai besoin:

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

Alors maintenant je peux l’utiliser en appelant:

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

Je fais habituellement:

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

ou

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

Pensez à utiliser le plugin de validation – c’est génial! Et réinitialiser la forme est simple:

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

Voici quelque chose pour commencer

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

Bien sûr, si vous avez des cases à cocher / boutons radio, vous devrez les modifier pour les inclure également et définir .attr({'checked': false});

modifier La réponse de Paolo est plus concise. Ma réponse est plus verbeuse car je ne connaissais pas le :input sélecteur d’ :input , et je n’ai pas pensé à supprimer simplement l’atsortingbut vérifié.

Je trouve que cela fonctionne bien.

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

fondamentalement aucune des solutions fournies ne me rend heureux. comme le soulignent quelques personnes, ils vident le formulaire au lieu de le réinitialiser.

Cependant, il existe quelques propriétés javascript qui aident:

• defaultValue pour les champs de texte
• defaultChecked pour les cases à cocher et les boutons radio
• defaultSélectionné pour les options select

ceux-ci stockent la valeur qu’un champ avait lors du chargement de la page.

écrire un plugin jQuery est maintenant sortingvial: (pour les impatients … voici une démo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

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

usage

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

quelques notes …

• Je n’ai pas examiné les nouveaux éléments du formulaire html5, certains pourraient nécessiter un traitement spécial, mais la même idée devrait fonctionner.
• les éléments doivent être référencés directement. c’est- $( "#container" ).resetValue() dire que $( "#container" ).resetValue() ne fonctionnera pas. utilisez toujours $( "#container :input" ) place.
• comme mentionné ci-dessus, voici une démonstration: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Vous trouverez peut-être que cela est plus facile à résoudre sans jQuery.

En JavaScript, c’est aussi simple que:

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

J’essaie de toujours me rappeler que si nous utilisons jQuery pour améliorer et accélérer notre codage, parfois ce n’est pas vraiment plus rapide. Dans ces cas, il est souvent préférable d’utiliser une autre méthode.

J’ai fait une légère variation de la solution de Francis Lewis . Ce que sa solution ne fait pas, c’est de définir les sélections déroulantes sur vide. (Je pense que lorsque la plupart des gens veulent “effacer”, ils veulent probablement rendre toutes les valeurs vides.) Celui-ci le fait avec .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; }; 

J’ajoute normalement un bouton de réinitialisation caché au formulaire. si nécessaire: $ (‘# reset’). click ();

Modification de la réponse la plus votée pour la situation $(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(); }); 

Utilisez simplement l’ jQuery Trigger event comme suit:

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

Cela réinitialisera les cases à cocher, les boutons radio, les zones de texte, etc. Essentiellement, cela transformera votre formulaire en son état par défaut. Placez simplement l’ #ID, Class, element dans le sélecteur jQuery .

Cela a fonctionné pour moi, la réponse de pyrotex n’a pas «réinitialisé les champs de sélection, a pris son, ici» ma modification:

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

J’utilise la solution Paolo Bergantino qui est géniale mais avec quelques modifications … Spécifiquement pour travailler avec le nom du formulaire plutôt qu’un identifiant.

Par exemple:

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

Maintenant, quand je veux l’utiliser un pourrait faire

 Reset 

Comme vous le voyez, cela fonctionne avec n’importe quel formulaire, et comme j’utilise un style css pour créer le bouton, la page ne sera pas actualisée lorsque vous cliquerez dessus. Merci encore à Paolo pour votre consortingbution. Le seul problème est si j’ai des valeurs par défaut dans le formulaire.

J’ai utilisé la solution ci-dessous et cela a fonctionné pour moi (mélange de javascript traditionnel avec jQuery)

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

Je suis juste un intermédiaire en PHP et un peu paresseux pour plonger dans un nouveau langage comme JQuery, mais n’est-ce pas une solution simple et élégante?

Je ne vois pas de raison pour laquelle il n’ya pas deux boutons d’envoi, mais avec des objectives différents. Alors simplement:

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

Il vous suffit de redéfinir vos valeurs à ce que la valeur par défaut est censée être.

Une méthode que j’ai utilisée sur un formulaire assez volumineux (50+ champs) consistait à simplement recharger le formulaire avec AJAX, en faisant essentiellement un rappel au serveur et en renvoyant simplement les champs avec leurs valeurs par défaut. Cela est beaucoup plus facile que d’essayer de saisir chaque champ avec JS, puis de le définir sur sa valeur par défaut. Il m’a également permis de conserver les valeurs par défaut au même endroit – le code du serveur. Sur ce site, il y avait également des parameters par défaut différents en fonction des parameters du compte et je n’avais donc pas à m’en soucier pour les envoyer à JS. Le seul petit problème auquel je devais faire face était que certains champs suggéraient une initialisation après l’appel d’AJAX, mais pas un problème majeur.

Toutes ces réponses sont bonnes, mais la méthode la plus simple consiste à effectuer une réinitialisation, c’est-à-dire à utiliser un lien et un bouton de réinitialisation.

Ajoutez simplement des CSS pour masquer votre véritable bouton de réinitialisation.

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

Et puis sur votre lien vous ajoutez comme suit

 Reset form  

J’espère que cela t’aides! UNE.

Ici, avec l’actualisation des cases à cocher et sélectionne:

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

J’avais le même problème et le poste de Paolo m’a aidé, mais j’avais besoin d’ajuster une chose. Mon formulaire avec l’ID advancedindexsearch contenait uniquement des champs d’entrée et récupère les valeurs d’une session. Pour une raison quelconque, ce qui suit n’a pas fonctionné pour moi:

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

Si je mets une alerte après cela, j’ai vu les valeurs supprimées correctement mais ensuite elles ont été remplacées à nouveau. Je ne sais toujours pas comment ni pourquoi mais la ligne suivante a fait l’affaire:

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

La réponse de Paolo ne tient pas compte des sélecteurs de date, ajoutez ceci dans:

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

J’ai apporté une petite amélioration à la réponse originale 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 cette manière, je peux passer n’importe quel élément de contexte à la fonction. Je suis capable de réinitialiser le formulaire entier ou seulement un certain ensemble de champs, par exemple:

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

De plus, les valeurs par défaut des entrées sont conservées.

voici ma solution, qui fonctionne également avec les nouveaux types d’entrée html5:

 /** * removes all value atsortingbutes from input/textarea/select-fields the element with the given css-selector * @param {ssortingng} 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; } }); } 

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