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

J'ai un formulaire avec un bouton de réinitialisation standard codé ainsi:

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

Le problème est que ledit formulaire est du type à plusieurs étapes, donc si un utilisateur remplit une étape puis revient plus tard, les valeurs `` mémorisées '' pour les différents champs ne seront pas réinitialisées lorsque vous cliquerez sur le bouton Effacer.

Je pense qu'attacher une fonction jQuery pour boucler sur tous les champs et les effacer «manuellement» ferait l'affaire. J'utilise déjà jQuery dans le formulaire, mais je ne fais que me mettre à jour et je ne sais donc pas comment procéder, à part référencer individuellement chaque champ par ID, ce qui ne semble pas très efficace.

TIA pour toute aide.

mis à jour en mars 2012.

Donc, deux ans après avoir répondu à cette question à l'origine, je reviens pour voir qu'elle s'est pratiquement transformée en 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 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 vrai qu'il est possible de réinitialiser un formulaire en utilisant la méthode native reset (), mais cette question essaie d'effacer un formulaire hors de souvenir 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 recherchent vraiment la méthode reset (), mais cela ne fonctionne pas pour le cas spécifique dont l'OP parle.

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 pour de nombreux cas, y compris pour l'OP, mais comme indiqué dans les commentaires et dans d'autres réponses, les éléments radio / case à cocher seront supprimés 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

Utilisation de la :text, :radioetc. sélecteurs par eux - mêmes est considéré comme une mauvaise pratique par jQuery comme ils finissent par l' évaluation à*:text ce qui en fait prendre beaucoup plus que prévu. Je préfère l'approche de la liste blanche et j'aurais aimé l'avoir utilisée dans ma réponse d'origine. Quoi qu'il en soit, en spécifiant leinput partie du sélecteur, plus le cache de l'élément de formulaire, cela devrait en faire la réponse la plus performante ici.

Cette réponse pourrait encore présenter des défauts si la valeur par défaut des utilisateurs pour les é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'obtenir et cela devrait être traité au cas par cas. .

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

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

le paramètre myinput.val('')peut ne pas émuler "reset" à 100% si vous avez une entrée comme celle-ci:

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

Par exemple, appeler myinput.val('')une entrée avec une valeur par défaut de 50 la mettra dans une chaîne vide, tandis que l'appel la myform.reset()réinitialisera à 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 .val('')ligne effacera également toutes valueles cases attribuées 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 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');

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 ses fonctionnalités clearForm ou resetForm . Il prend en charge la plupart des cas d'angle.

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

Je fais habituellement:

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

ou

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

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 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 :inputsélecteur et je n'ai pas pensé à supprimer simplement l'attribut vérifié.

Pensez à utiliser le plugin de validation - c'est génial! Et la réinitialisation du formulaire est simple:

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

Je trouve que cela fonctionne bien.

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

fondamentalement aucun des solutions fournies ne me satisfait. comme l'ont souligné 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
• defaultSelected pour sélectionner les options

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 du formulaire html5, certains pourraient avoir besoin d'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 à la $( "#container :input" )place.
• comme mentionné ci-dessus, voici une démo: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Vous pourriez constater que cela est en fait plus facile à résoudre sans jQuery.

En JavaScript normal, c'est aussi simple que:

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

J'essaie de toujours me rappeler que même 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 belle solution de Francis Lewis . Ce que sa solution ne fait pas, c'est que les listes déroulantes soient vides. (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. au besoin: $ ('# reset'). click ();

Modification de la réponse la plus votée à la $(document).ready()situation:

$('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 ce qui jQuery Trigger eventsuit:

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

Cela réinitialisera les cases à cocher, les boutons radio, les zones de texte, etc ... Essentiellement, cela remettra votre formulaire à son état par défaut. Mettez simplement l' #ID, Class, elementintérieur du jQuerysélecteur.

cela a fonctionné pour moi, la réponse pyrotex n'a pas réinitialisé les champs de sélection, a pris le sien, voici 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 ajustements ... Plus précisément pour travailler avec le nom du formulaire au lieu d'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, je pourrais faire

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

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 s'actualisera pas lorsque vous cliquez dessus. Merci encore Paolo pour votre contribution. Le seul problème est que 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 le suivant n'est-il pas une solution simple et élégante?

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

Je ne vois pas pourquoi vous n'avez pas deux boutons d'envoi, simplement à des fins différentes. Alors simplement:

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

Vous redéfinissez simplement 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 (plus de 50 champs) consistait à recharger le formulaire avec AJAX, essentiellement en rappelant le 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 définir sur sa valeur par défaut. Cela m'a également permis de conserver les valeurs par défaut en un seul endroit - le code du serveur. Sur ce site, il y avait aussi des valeurs par défaut différentes selon les paramètres du compte et donc je n'avais pas à me soucier de les envoyer à JS. Le seul petit problème que j'ai dû traiter était certains champs de suggestion qui nécessitaient une initialisation après l'appel AJAX, mais ce n'était pas grave.

Toutes ces réponses sont bonnes mais la façon la plus simple de le faire est avec une fausse réinitialisation, c'est-à-dire que vous utilisez un lien et un bouton de réinitialisation.

Ajoutez simplement du 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 t'aides! UNE.

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

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 je devais ajuster une chose. Mon formulaire avec id advancedindexsearch contenait uniquement des champs de saisie et obtient 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, 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 pour moi:

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

La réponse de Paolo ne tient pas compte des sélecteurs de dates, 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 façon, je peux passer n'importe quel élément de contexte à la fonction. Je peux réinitialiser l'intégralité du formulaire 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 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;
        }
    });
}

En complément de 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();
    }

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