Réinitialisation d'un formulaire à plusieurs étapes avec jQuery
J'ai un formulaire avec un bouton de réinitialisation standard ainsi codé:
<input type="reset" class="button standard" value="Clear" />
Le problème est que sa forme est du type multi-étapes. Ainsi, si un utilisateur remplit une étape et revient ensuite, les valeurs "mémorisées" des différents champs ne seront pas réinitialisées lorsque le bouton Effacer sera cliqué.
Je pense qu'attacher une fonction jQuery pour boucler tous les champs et les effacer 'manuellement' ferait l'affaire. J'utilise déjà jQuery dans le formulaire, mais je commence tout juste à être rapide et je ne sais pas trop comment s'y prendre, à part référencer chaque champ individuellement par ID, ce qui ne semble pas très efficace.
TIA pour toute aide.
mis à jour le mars 2012.
Donc, deux ans après avoir initialement répondu à cette question, je reviens pour constater que cela a plutôt bien tourné au désordre. Je pense qu'il est temps que j'y revienne et que ma réponse soit vraiment correcte, car elle est la plus votée + acceptée.
Pour mémoire, 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 à l’aide de la méthode native reset (), mais cette question tente de supprimer un formulaire de sa mémoire. valeurs qui resteraient dans le formulaire si vous le réinitialisiez 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 qu'ils recherchent réellement la méthode reset (), mais cela ne fonctionne pas pour le cas spécifique dont parle l'OP.
Mon original réponse était ceci:
// 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 le PO, mais comme indiqué dans les commentaires et dans d'autres réponses, effacera les éléments radio/case à cocher de tous les attributs 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
Utiliser les sélecteurs :text, :radio, etc. en eux-mêmes est considéré comme une mauvaise pratique par jQuery, car ils finissent par évaluer *:text, ce qui prend beaucoup plus de temps que prévu. Je préfère l'approche de la liste blanche et j'aurais bien aimé l'utiliser dans ma réponse initiale. Quoi qu'il en soit, en spécifiant la partie input du sélecteur, ainsi que le cache de l'élément de formulaire, cela devrait en faire la réponse la plus performante ici.
Cette réponse peut toujours avoir des défauts si la valeur par défaut des personnes pour certains éléments sélectionnés n'est pas une option qui a une valeur vide, mais elle est certainement aussi générique qu'elle va l'être et cela devra être traité au cas par cas. .
De http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :
$('#myform')[0].reset();
définir myinput.val('') pourrait ne pas émuler "réinitialiser" 100% si vous avez une entrée comme celle-ci:
<input name="percent" value="50"/>
Par exemple, appeler myinput.val('') sur une entrée avec une valeur par défaut de 50 le définirait comme chaîne vide, alors 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('')effacera également toute value attribuée aux cases à cocher et aux boutons radio. Donc si (comme moi) vous faites quelque chose comme ça:
<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />
L'utilisation de la réponse acceptée transformera vos entrées en:
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
Oups - J'utilisais cette valeur!
Voici une version modifiée qui conservera les valeurs de votre case à cocher et de votre 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');
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();
Effacer les formulaires est un peu délicat et pas aussi simple qu'il n'y paraît.
Nous vous suggérons d’utiliser le plugin de formulaire jQuery et d’utiliser sa fonctionnalité clearForm ou resetForm ..... Il prend en charge la plupart des cas.
document.getElementById ('frm'). reset ()
Je fais habituellement:
$('#formDiv form').get(0).reset()
ou
$('#formId').get(0).reset()
Pensez à utiliser le plugin validation - c'est génial! Et la remise en forme est simple:
var validator = $("#myform").validate();
validator.resetForm();
Voici quelque chose pour vous aider à démarrer
$('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 modifier cela pour les inclure également et définir .attr({'checked': false});
editLa réponse de Paolo est plus concise. Ma réponse est plus verbeuse parce que je ne connaissais pas le sélecteur :input et que je ne pensais pas simplement à supprimer l'attribut vérifié.
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, quelques propriétés javascript peuvent vous aider:
- defaultValue pour les champs de texte
- defaultChecked pour les cases à cocher et les boutons radio
- defaultSélectionné pour les options sélectionnées
ceux-ci stockent la valeur d'un champ lors du chargement de la page.
écrire un plugin jQuery est maintenant trivial: (pour les impatients ... voici une démo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )
plugin-code
(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 de 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-à-dire
$( "#container" ).resetValue()ne fonctionnera pas. utilisez toujours$( "#container :input" )à la place. - comme mentionné ci-dessus, voici une démo: http://jsfiddle.net/kritzikratzi/N8fEF/1/
J'ai fait une légère variation de solution de Nice de Francis Lewis . Ce que sa solution ne fait pas, c’est de régler le menu déroulant sur vide. (Je pense que lorsque la plupart des gens veulent "effacer", ils veulent probablement vider toutes les valeurs.) 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;
};
Vous constaterez peut-être que cela est en fait plus facile à résoudre sans jQuery.
En JavaScript normal, ceci est aussi simple que:
document.getElementById('frmitem').reset();
J'essaie de toujours me rappeler que, bien que nous utilisions jQuery pour améliorer et accélérer notre codage, ce n'est parfois pas vraiment plus rapide. Dans ces cas, il est souvent préférable d'utiliser une autre méthode.
Je trouve que ça marche bien.
$(":input").not(":button, :submit, :reset, :hidden").each( function() {
this.value = this.defaultValue;
});
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 le jQuery Trigger event comme suit:
$('form').trigger("reset");
Cela réinitialisera les cases à cocher, les boutons radio, les zones de texte, etc. Il transforme votre formulaire en état par défaut. Il suffit de placer le #ID, Class, element dans le sélecteur jQuery.
J'ajoute normalement un bouton de réinitialisation caché au formulaire . $ ('# reset'). click ();
Je ne suis qu'un intermédiaire en PHP, et un peu paresseux pour plonger dans un nouveau langage comme JQuery, mais la suite n'est-elle pas une solution simple et élégante?
<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />
Vous ne pouvez pas voir une raison pour laquelle ne pas avoir deux boutons de soumission, avec des objectifs différents. Alors simplement:
if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }
Vous venez de redéfinir vos valeurs sur ce que la valeur par défaut est supposée être.
J'ai utilisé la solution ci-dessous et cela a fonctionné pour moi (mélange de javascript traditionnel et jQuery)
$("#myformId").submit(function() {
comand="window.document."+$(this).attr('name')+".reset()";
setTimeout("eval(comando)",4000);
})
cela a fonctionné pour moi, réponse pyrotex n'a pas 'réinitialiser les champs de sélection, a pris son, voici' mon édition:
// 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, ce qui est excellent, mais avec quelques modifications mineures ... Plus précisément, utiliser 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, ça pourrait le faire
<span class="button" onclick="jqResetForm('formName')">Reset</span>
Comme vous le voyez, cela fonctionne avec n’importe quel formulaire et parce que j’utilise un style CSS pour créer le bouton, la page ne s’actualise pas lorsque vous cliquez dessus. Encore une fois, merci Paolo pour votre contribution. Le seul problème est si j'ai des valeurs par défaut dans le formulaire.
Toutes ces réponses sont bonnes, mais la façon la plus simple de le faire est de simuler une réinitialisation, c’est-à-dire d’utiliser un lien et un bouton de réinitialisation.
Il suffit d’ajouter du code 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
<a href="javascript:{}" onclick="reset.click()">Reset form</a>
<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->
J'espère que cela aide!.
Ici avec l'actualisation pour les 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'ai légèrement amélioré 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 façon, je peux transmettre 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.
<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>
Une méthode que j'ai utilisée sur un formulaire assez volumineux (plus de 50 champs) consistait simplement à recharger le formulaire avec AJAX, en faisant un appel au serveur et en renvoyant 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 régler à sa valeur par défaut. Cela 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 aussi des valeurs par défaut différentes en fonction des paramètres du compte. Par conséquent, je n'avais pas à m'inquiéter de les envoyer à JS. Le seul petit problème que j'ai eu à traiter était que certains champs suggéraient une initialisation après l'appel AJAX, mais ce n'était pas grave.
J'avais le même problème et le poste de Paolo m'a aidé, mais je devais ajuster une chose. Mon formulaire avec id advancedindexsearch ne contenait que des champs de saisie et récupérait les valeurs d'une session. Pour une raison quelconque, les éléments suivants n'ont pas fonctionné pour moi:
$("#advancedindexsearch").find("input:text").val("");
Si je mets une alerte après cela, je voyais les valeurs supprimées correctement mais ensuite, elles étaient remplacées. Je ne sais toujours pas comment ni pourquoi, mais la ligne suivante a fait l'affaire pour moi:
$("#advancedindexsearch").find("input:text").attr("value","");
Pour compléter la réponse acceptée, si vous utilisez le plug-in SELECT2, vous devez rappeler le script select2 pour apporter des modifications à tous les champs 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();
}
voici ma solution, qui fonctionne également avec les nouveaux types d'entrée HTML 5:
/**
* 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;
}
});
}
La réponse de Paolo ne prend pas en compte les sélecteurs de date, ajoutez ceci dans:
$form.find('input[type="date"]').val('');