Fonction jQuery/Javascript pour effacer tous les champs d'un formulaire

Question

Je cherche une fonction jQuery qui efface tous les champs d'un formulaire après avoir soumis le formulaire.

Je n'ai pas de code HTML à montrer, j'ai besoin de quelque chose de générique.

Pouvez-vous nous aider ?

Gracias.

Answer 1

Nota Cette réponse concerne la réinitialisation des champs de formulaire, et non l'effacement des champs - voir la mise à jour.

Vous pouvez utiliser la fonction native de JavaScript reset() pour réinitialiser le formulaire entier à son par défaut l'État.

Exemple fourni par Ryan :

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

Nota: Cela peut ne pas réinitialiser certains champs, tels que type="hidden" .

UPDATE

Comme l'a noté IlyaDoroshin la même chose peut être accomplie en utilisant l'outil jQuery trigger() :

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

UPDATE

Si vous devez faire plus que réinitialiser le formulaire à son par défaut vous devez revoir les réponses aux questions suivantes Réinitialisation d'un formulaire à plusieurs étapes avec jQuery .

Answer 2

Pour réinitialiser le formulaire (mais pas l'effacer), il suffit de déclencher reset événement :

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

A clair un formulaire voir d'autres réponses.

Answer 3

Quelque chose de similaire à $("#formId").reset() n'effacera pas les éléments de formulaire dont les valeurs par défaut sont différentes de celles de l'option "" . Cela peut notamment se produire lors de la soumission d'un formulaire précédent : une fois qu'un formulaire a été soumis reset() réinitialiserait les valeurs du formulaire à celles précédemment soumises qui ne seront probablement pas "" .

Une option pour effacer tous les formulaires de la page, est d'appeler une fonction telle que la suivante, en l'exécutant simplement comme clearForms() :

function clearForms()
{
    $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $(':checkbox, :radio').prop('checked', false);
}

Si vous voulez réinitialiser un formulaire spécifique, modifiez la fonction comme suit, et appelez-la en tant que clearForm($("#formId")) :

function clearForm($form)
{
    $form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $form.find(':checkbox, :radio').prop('checked', false);
}

Lorsque je suis arrivé sur cette page, j'avais besoin d'une solution qui tienne compte de la modification des valeurs par défaut des formulaires tout en permettant d'effacer tous les éléments saisis.

Notez que cela n'effacera pas placeholder texte.

Answer 4

Définissez le val à ""

function clear_form_elements(ele) {

        $(ele).find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                    $(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });

    }

<input onclick="clear_form_elements(this.form)" type="button" value="Clear All" />  
<input onclick="clear_form_elements('#example_1')" type="button" value="Clear Section 1" />
<input onclick="clear_form_elements('#example_2')" type="button" value="Clear Section 2" />
<input onclick="clear_form_elements('#example_3')" type="button" value="Clear Section 3" />

Vous pourriez aussi essayer quelque chose comme ça :

  function clearForm(form) {

    // iterate over all of the inputs for the form

    // element that was passed in

    $(':input', form).each(function() {

      var type = this.type;

      var tag = this.tagName.toLowerCase(); // normalize case

      // it's ok to reset the value attr of text inputs,

      // password inputs, and textareas

      if (type == 'text' || type == 'password' || tag == 'textarea')

        this.value = "";

      // checkboxes and radios need to have their checked state cleared

      // but should *not* have their 'value' changed

      else if (type == 'checkbox' || type == 'radio')

        this.checked = false;

      // select elements need to have their 'selectedIndex' property set to -1

      // (this works for both single and multiple select elements)

      else if (tag == 'select')

        this.selectedIndex = -1;

    });

  };

Plus d'informations aquí y aquí

Answer 5

    <form id="form" method="post" action="action.php">
      <input type="text" class="removeLater" name="name" /> Username<br/>
      <input type="text" class="removeLater" name="pass" /> Password<br/>
      <input type="text" class="removeLater" name="pass2" /> Password again<br/>
    </form>
    <script>
$(function(){
    $("form").submit(function(e){
         //do anything you want
         //& remove values
         $(".removeLater").val('');
    }

});
</script>