web-dev-qa-db-fra.com

Effacer les champs de formulaire avec jQuery

Je souhaite effacer tous les champs de saisie et de texte dans un formulaire. Cela fonctionne comme suit lorsque vous utilisez un bouton d'entrée avec la classe reset:

$(".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 sous laquelle se trouve le bouton de réinitialisation?

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

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 jQuery suggère :

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

583
ngen

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

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

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

Quelque chose comme devrait fonctionner

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

si vous utilisez des sélecteurs et transformez les valeurs en valeurs vides, il ne s'agit pas de réinitialiser le formulaire, mais de rendre tous les champs vides. Réinitialiser consiste à créer le formulaire tel qu'il était avant toute action d'édition 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 côté serveur, la plupart des solutions de cette page suppriment cette valeur de l'entrée et ne la réinitialisent pas. 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 valeur, par exemple une valeur vide, vous pouvez utiliser la plupart des solutions d'autres commentaires.

46
Lukas

Simple mais fonctionne comme un charme.

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

Si quelqu'un lit encore ce fil, voici la solution la plus simple: ne pas utiliser jQuery, mais du JavaScript pur. Si vos champs de saisie se trouvent dans un formulaire, il existe une simple commande de réinitialisation de JavaScript:

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

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

À votre santé!

27
Tarmo Saluste
$('form[name="myform"]')[0].reset();
20
apen

Pourquoi faut-il le faire 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

Essayé en premier, les champs avec des valeurs par défaut ne seront pas effacés.

Voici un moyen de le faire avec jQuery, puis:

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

Si vous souhaitez vider toutes les zones de saisie, quel que soit leur type, la procédure est détaillée. 

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

J'ai eu la meilleure astuce pour réinitialiser le formulaire

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

ou 

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

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 manière $('#your-form-id')[0].reset();

Rappelez-vous 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 réinitialisent uniquement votre formulaire à la 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 'set value' avant que vous n'ayez effectué une modification aléatoire, le champ sera réinitialisé sur cette même valeur après l'appel de la méthode reset.

J'espère que ça aide

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

où editPOIForm est l'attribut id de votre formulaire.

6
Knowledge Serve

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).ready et ce doit être avec votre logique.

5
DeepCode

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

5
Carlos Alvarez

J'utilise ceci:

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

Et voici mon bouton:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>
3
Matheno

Supposons que si vous souhaitez effacer les champs et sauf accountType, la liste déroulante du temps moyen sera réinitialisée à une valeur particulière, par exemple «All». 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';
     }
 });
3
Gnanasekaran Ebinezar

Utilisez ce code pour appeler la fonction de réinitialisation normale de jQuery

setTimeout("reset_form()",2000);

Et écrire cette fonction sur le site jQuery sur Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>
1
Monzur
@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. OnSuccess de 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 bien les deux, vous ne pourrez pas l'empêcher de fonctionner ...

1
L.W.C. Nirosh

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

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

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>

0
Jekis

Rien de ce qui précède ne fonctionne dans un cas simple où la page inclut un appel au contrôle de l'utilisateur Web impliquant le traitement de la demande IHttpHandler (captcha) . form (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
user2366666

Si je veux effacer tous les champs sauf accountType..Utilisez ce qui suit

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

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

Réinitialiser un formulaire signifie définir les valeurs d'origine à partir du code HTML. Je l'ai donc créé pour un petit projet que je réalisais en fonction du 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()) })

Faites-moi savoir s'il me manque quelque chose ou si quelque chose peut être amélioré.

0
Rafael Kitover