Effacer les champs du formulaire avec jQuery


402

Je souhaite effacer tous les champs de saisie et de zone de texte d'un formulaire. Il fonctionne comme suit lors de l'utilisation d'un bouton d'entrée avec la resetclasse:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Cela effacera tous les champs de la page, pas seulement ceux du formulaire. À quoi ressemblerait mon sélecteur pour la forme dans laquelle se trouve le bouton de réinitialisation?



2
Méthode plus détaillée pour réinitialiser un formulaire ici .
Uzbekjon

Réponses:


487
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

49
N'oubliez pas vos input[type=password]champs.
SammyK

64
Cette réponse couvre la question d'origine. Ceux qui veulent plus que des champs de texte devront évidemment ajouter du code au besoin ...
ShaneBlake

2
rappelez-vous également qu'il y aura plus de types d'entrées autres que type = mot de passe (comme l'a dit SammyK) en HTML5: type = url, type = chiffres, type = email, etc. http://www.w3.org/TR/html5/forms .html # attribut state-of-the-type
Gabriel

6
Un petit conseil: ce sélecteur ne sélectionne pas les éléments d'entrée qui s'appuient sur le type implicite = texte, vous devez explicitement inclure le type = texte sur votre balisage. C'est peut-être évident, mais ce n'était pas pour moi, tout à l'heure :-)
Elbin

2
@CaptSaltyJack: Cela les réinitialise aux valeurs par défaut, ce qui n'est pas la même chose que de les effacer ...
ShaneBlake

629

Pour jQuery 1.6+ :

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

Pour jQuery <1.6 :

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

Veuillez consulter cet article: réinitialisation d'un formulaire à plusieurs étapes avec jQuery

Ou

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

Comme le suggère jQuery :

Pour récupérer et modifier les propriétés DOM telles que les éléments checked, selectedou l' disabledétat des formulaires, utilisez la méthode .prop () .


3
Le premier morceau de code définira les valeurs des cases à cocher sur "" au lieu de simplement les décocher. Et cela n'affectera pas les sélections, car ce sont les balises d'options qui sont sélectionnées.

6
pour éviter d' enlever les valeurs des cases à cocher, je suit, inspiré par votre réponse: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');. Il supprimera les valeurs par défaut (c'est-à value="something"- dire , mais pas pour les cases à cocher ou les sélections.
Jeppe Mariager-Lam

17
N'UTILISEZ PAS CELA (option 1) si vous avez des radios, des cases à cocher ou des sélections, vous perdrez beaucoup de temps à trouver un bug étrange après la disparition de leurs valeurs. La version correcte, qui laisse leurs valeurs intactes: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');(basé sur le commentaire de Jeppe Mariager-Lam)
Konstantin Pereiaslov

8
Une raison d'éviter la deuxième option?
rineez

6
votre deuxième solution est la réponse réelle
abzarak

159

Une raison pour laquelle cela ne devrait pas être utilisé?

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

17
@ pythonian29033: et avec votre approche, vous réinitialiserez TOUS les formulaires de la page aux valeurs par défaut ... ce qui n'est certainement PAS ce qu'un développeur normal veut. Je pense qu'un développeur jQuery devrait prendre note du fait qu'il / elle doit changer le sélecteur d'un exemple de code en un code approprié ...
Sk8erPeter

8
@ Sk8erPeter Si vous avez plusieurs éléments sur la page avec ID form, vous vous trompez. Vous auriez raison si le sélecteur l'était form, mais c'est plutôt le sélecteur d'ID #form.
brandones

@brandones: Vous auriez dû faire attention à ce à quoi vous répondiez, parce que vous vous trompez ... :) Vérifiez le code que pythonian29033 a écrit (auquel j'ai répondu plus tôt): $("form").trigger('reset');déclenche vraiment l'événement "reset" sur TOUS les <form>éléments. Dans la plupart des cas, cela peut être faux. Mais $("#form").trigger('reset');(indiqué dans la réponse d'origine) ne déclenche que l'événement "reset" sur l'élément dont l'id "form" est défini (accessible avec le #formsélecteur). Et oui, un identifiant ne doit être utilisé qu'une seule fois, c'est pourquoi ils l'appellent "id", car il identifie sans équivoque un élément.
Sk8erPeter

61

Cela ne traitera pas les cas où les champs de saisie de formulaire ont des valeurs par défaut non vides.

Quelque chose comme ça devrait marcher

$('yourdiv').find('form')[0].reset();

J'ai juste le code js de mon premier post et je veux qu'il fonctionne sur chaque page avec plusieurs boutons de réinitialisation sous plusieurs formes. C'est donc juste le sélecteur qui a besoin d'une contribution.
tbuehlmann

51

si vous utilisez des sélecteurs et faites des valeurs pour vider des valeurs, cela ne réinitialise pas le formulaire, cela rend tous les champs vides. La réinitialisation consiste à créer le formulaire tel qu'il était avant toute action de modification de l'utilisateur après le chargement du formulaire côté serveur. S'il existe une entrée avec le nom "nom d'utilisateur" et que ce nom d'utilisateur a été prérempli du côté serveur, la plupart des solutions de cette page suppriment cette valeur d'entrée, ne la réinitialise pas à la valeur telle qu'elle était avant les modifications de l'utilisateur. Si vous devez réinitialiser le formulaire, utilisez ceci:

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

si vous n'avez pas besoin de réinitialiser le formulaire, mais remplissez toutes les entrées avec une certaine valeur, par exemple une valeur vide, vous pouvez utiliser la plupart des solutions d'autres commentaires.


29

Simple mais fonctionne comme un charme.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

14
Sauf que cela n'efface pas les champs. Cela les remet à leurs valeurs par défaut.
Mark Fraser

29

Si quelqu'un lit toujours ce fil, voici la solution la plus simple en utilisant non jQuery, mais du JavaScript simple. Si vos champs de saisie sont à l'intérieur d'un formulaire, il existe une simple commande de réinitialisation JavaScript:

document.getElementById("myform").reset();

Plus d'informations à ce sujet ici: http://www.w3schools.com/jsref/met_form_reset.asp

À votre santé!


Comme il est dit. Il réinitialise la valeur de forme initiale et ne vide pas les valeurs. Mais oui, si vous avez chargé un formulaire avec des valeurs par défaut, elles ne seront pas effacées. Probablement une boucle JS qui traverse toutes les entrées et les efface
Tarmo Saluste


17

Pourquoi cela doit-il être fait avec du JavaScript?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords


J'ai essayé celui-là en premier, il n'effacera pas les champs avec des valeurs par défaut.

Voici un moyen de le faire avec jQuery, alors:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

1
J'ai essayé celui-là en premier, il n'effacera pas les champs avec des valeurs par défaut.
tbuehlmann

Il y a une autre raison pour laquelle vous avez souvent besoin de JavaScript pour celui-ci. Le formulaire n'est peut-être pas du tout un "formulaire". Par exemple, votre formulaire n'est en réalité qu'une collection d'entrées pour une application Backbone.js / Ember.js / AngularJS et les données ne seront jamais soumises sous forme de formulaire traditionnel au serveur, mais doivent être traitées strictement avec le côté client JavaScript. Dans de tels cas, il n'y a pas de formulaire pour que la réinitialisation fonctionne.
John Munsch

3
.live()est obsolète, et il est également lent / inutile. Vous pouvez simplement utiliser .bind()ou .on().
Kevin Beal

14

Si vous souhaitez vider toutes les zones de saisie quel que soit leur type, il suffit d'une minute

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

12

J'ai le truc le plus simple pour réinitialiser le formulaire

jQuery("#review-form")[0].reset();

ou

$("#review-form").get().reset();

12

Avec Javascript, vous pouvez simplement le faire avec cette syntaxe getElementById("your-form-id").reset();

vous pouvez également utiliser jquery en appelant la fonction de réinitialisation de cette façon $('#your-form-id')[0].reset();

N'oubliez pas de ne pas oublier [0]. Vous obtiendrez l'erreur suivante si

TypeError: $ (...). Reset n'est pas une fonction

JQuery fournit également un événement que vous pouvez utiliser

$ ('# form_id'). trigger ("reset");

J'ai essayé et ça marche.

Remarque: il est important de noter que ces méthodes ne réinitialisent votre formulaire qu'à sa valeur initiale définie par le serveur lors du chargement de la page. Cela signifie que si votre entrée a été définie sur la valeur «valeur définie» avant d'effectuer une modification aléatoire, le champ sera réinitialisé à cette même valeur après l'appel de la méthode de réinitialisation.

J'espère que cela aide


7
$('#editPOIForm').each(function(){ 
    this.reset();
});

editPOIFormest l' idattribut de votre formulaire.


2
Il n'y en aura qu'un #editPOIFormet la .each()méthode n'a donc aucun sens. Même si vous avez ajouté cet identifiant à plusieurs formulaires, il n'en retournerait jamais qu'un seul.
Kevin Beal

1
Le each () vous permet d'utiliser ceci (au lieu de $ (this)) pour accéder à l'objet DOM sous-jacent, et d'appeler reset (). En supposant que vous souhaitiez réinitialiser les valeurs par défaut, au lieu de tout effacer, c'est une bonne solution.
Dave

@Dave pourrait tout aussi bien utiliser$('#editPOIForm').get(0).reset();
Thomas Daugaard

2
@ThomasDaugaard: sauf que si vous utilisez get (0) ou simplement $ ('# editPOIForm') [0] vous obtiendrez une erreur de script si $ ('# editPOIForm') ne correspond à aucun élément, tandis que each () échouera sans une erreur. Je suppose donc que cela dépend de vos priorités en ce qui concerne la gestion des erreurs.
Dave

6

Pourquoi vous n'utilisez pas document.getElementById("myId").reset();? c'est simple et joli


6

Code testé et vérifié:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript doit être inclus dans $(document).readyet il doit être conforme à votre logique.


5

La solution la plus simple et la meilleure est
$("#form")[0].reset();

Ne pas utiliser ici -
$(this)[0].reset();


Juste un petit avertissement: si vous avez des valeurs par défaut pour les entrées, disons rendues par le serveur, elles form.reset();seront réinitialisées à ces valeurs et n'effaceront pas les entrées.
Evil_Bengt

4

Disons que si vous souhaitez effacer les champs et sauf accountType, dans le temps moyen, la liste déroulante sera réinitialisée à une valeur particulière, c'est-à-dire 'Tous'. Les champs restants doivent être réinitialisés pour être vides, c'est-à-dire la zone de texte. domaines particuliers comme notre exigence.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

Réponse la plus complète. Merci.
RationalRabbit

Une question: comment dirigeriez-vous cela vers un formulaire spécifique si vous le faisiez par programme, plutôt qu'avec un clic de bouton?
RationalRabbit


3

Utilisez ce code où vous souhaitez appeler la fonction de réinitialisation normale par jQuery

setTimeout("reset_form()",2000);

Et écrire cette fonction hors site jQuery sur Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

3

Certains d'entre vous se plaignaient que les radios et autres sont effacées de l'état "vérifié" par défaut ... Tout ce que vous avez à faire est d'ajouter les sélecteurs: radio,: au .not et le problème est résolu.

Si vous ne pouvez pas faire fonctionner toutes les autres fonctions de réinitialisation, celle-ci le fera.

  • Adapté de la réponse de ngen

    function form_reset(formID){
        $(':input','#'+formID)
        .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
        .val('');
    }

2
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 
  1. frmID est l'identification du formulaire
  2. OnSuccessde l'opération, nous appelons la fonction JavaScript avec le nom " ClearInput"

    <script type="text/javascript">
        function ClearInput() {
            //call action for render create view
            $("#frmID").get(0).reset();
        }
    </script>
  3. si vous faites les deux correctement, vous ne pourrez pas l'empêcher de fonctionner ...


1

Le code suivant efface tout le formulaire et ses champs seront vides. Si vous souhaitez effacer uniquement un formulaire particulier si la page comporte plusieurs formulaires, veuillez mentionner l'identifiant ou la classe du formulaire

$("body").find('form').find('input,  textarea').val('');

0

Si je veux effacer tous les champs sauf accountType..Use the following

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

1
vous ne voulez pas perdre les valeurs des cases à cocher et des boutons radio, mais décochez-les seulement, celui-ci n'est pas une bonne solution
Frankey

0

le code que je vois ici et sur les questions SO connexes semble incomplet.

Réinitialiser un formulaire signifie définir les valeurs d'origine à partir du HTML, j'ai donc mis cela ensemble pour un petit projet que je faisais basé sur le code ci-dessus:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

Veuillez me faire savoir si je manque quelque chose ou si quelque chose peut être amélioré.


0

Rien de ce qui précède ne fonctionne dans un cas simple lorsque la page inclut un appel au contrôle utilisateur Web qui implique le traitement des demandes IHttpHandler (captcha). Après avoir envoyé le requsrt (pour le traitement d'image), le code ci-dessous n'efface pas les champs du formulaire (avant d'envoyer la demande HttpHandler) tout fonctionne correctement.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

0

J'ai écrit un plugin universel jQuery:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>


-2

Ajouter un bouton de réinitialisation caché comme suit

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

-4

$ ('formulaire'). submit (function () {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.