Effacer les champs du formulaire avec jQuery

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?

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

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 () .

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

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

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

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.

Simple mais fonctionne comme un charme.

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

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

$('form[name="myform"]')[0].reset();

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

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

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

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

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

ou

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

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

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

où editPOIFormest l' idattribut de votre formulaire.

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

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.

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

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

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

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>

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>

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

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

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

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

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

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

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>

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>

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

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

var el = $(this);

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

return false;

});