Vider un formulaire HTML avec JavaScript

Catégorie < javascript >

1FORMATIK.com
Espace ~public
© 1998 - 2024

Sommaire

  • Vider une balise HTML input qui contient du texte ou un fichier
  • Décocher une case à cocher du type checkbox
  • Décocher une case à cocher du type radio
  • Réinitialiser un menu select simple et multiple
  • Vider une balise HTML textarea
  • Fonction JavaScript pour vider l'ensemble d'un formulaire HTML

Information

Rédigé par Antoine
Publié le 2023-10-17
Modifié le 2023-10-17
1810 affichages
15 likes
0 non-like

Préambule

Avant de vous lancer dans la lecture de ce tutoriel, et si vous cherchez une solution simple pour ré-initialiser l'ensemble des éléments d'un formulaire HTML, éléments tous inclus dans une balise HTML <form>, il vous suffit d'utiliser l'élément <input> du type reset.

<input type="reset" value="Ré-initialiser">

Vous pouvez également ré-initialiser un formulaire avec la méthode JavaScript reset() ; à noter que cette méthode ne fonctionne que si les éléments du formulaire sont inclus dans une balise <form>.

Par ailleurs cela ne vide pas réellement un formulaire, mais le ré-initialise. Ainsi si un input du type text contient intialement du texte, et que l'utilisateur y ajoute un texte complémentaire, la fonction reset() rétablira le contenu de la balise input au texte d'origine.

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

En revanche si les éléments du formulaire ne sont pas inclus dans une balise <form>, et / ou si vous préférez utiliser JavaScript, vous pouvez continuer la lecture de ce tutoriel.

Vider une balise HTML <input> qui contient du texte ou un fichier

Pour ré-initialiser et vider un input HTML, vous devez tout d'abord identifier le champ à réinitialiser ; pour cela vous pouvez par exemple lui attribuer un id.

<input type="text" id="exemple" name="nom" value="un contenu d'exemple">

Pour identifier la balise <input> en JavaScript on utilise la méthode getElementById().

var input = document.getElementById("exemple");

Pour identifier la valeur de la balise <input> on utilise la propriété value et pour réinitialiser la valeur il suffit de faire un value="".

var input = document.getElementById("exemple");
input.value = "";

Pour exécuter ces deux lignes de code vous pourriez par exemple utiliser un évènement onclick à placer sur le bouton de ré-initialisation de votre formulaire.

<button type="button" onclick="doResetInput('exemple');">Ré-initialiser</button>

Lorsqu'on clique sur le bouton, la fonction doReset('exemple') est exécutée.

<input type="text" id="exemple" name="nom" value="exemple de contenu">
<button type="button" onclick="doResetInput('exemple');">Ré-initialiser</button>
<script>
function doResetInput(id) {
  var input = document.getElementById(id);
  input.value = "";
}
</script>

Voici le code ci-avant en action pour vider un input HTML avec JavaScript :

Décocher une case à cocher checkbox

Les cases du type checkbox sont indépendantes les unes des autres.

Lorsqu’une case checkbox est cochée elle se voit attribuer la propriété checked.

<input type="checkbox" id="exemple2" name="nom" value="exemple 2" checked>

Vous pouvez donc lui attribuer un ID pour l’identifier, puis définir la propriété checked sur la valeur false ; cela aura pour effet de décocher la case.

<input type="checkbox" id="exemple2" name="nom" value="exemple 2" checked>
<button type="button" onclick="doResetCheckbox('exemple2');">Ré-initialiser</button>
<script>
function doResetCheckbox(id) {
  var checkbox = document.getElementById(id);
  checkbox.checked= false;
}
</script>

Voici le code ci-avant en action pour décocher une case à cocher du type checkbox avec JavaScript :

Décocher une case à cocher radio

Les cases du type radio sont dépendantes les unes des autres dès lors qu'elles ont le même attribut name.

<input type="radio" name="cases" value="0">
<input type="radio" name="cases" value="1">
<input type="radio" name="cases" value="2">

Pour identifier la case qui est cochée on utilise une boucle for pour parcourir les cases qui ont le même attribut name.

C'est la méthode getElementsByName() qui nous permet de lister toutes les cases à cocher avec le même attribut name.

Tout comme dans l'exemple des checkbox, on identifie la case cochée avec la propriété checked.

<input type="radio" name="cases" value="0">
<input type="radio" name="cases" value="1" checked>
<input type="radio" name="cases" value="2">
<button type="button" onclick="doResetRadio('cases');">Ré-initialiser</button>
<script>
function doResetRadio(nom) {
  var radio = document.getElementsByName(nom);
  for(var i=0;i<radio.length;i++) {
    radio[i].checked = false;
  }
}
</script>

Voici le code ci-avant en action pour décocher une case à cocher du type radio avec JavaScript :

Réinitialiser un menu select simple et multiple

Un menu select permet de choisir une ou plusieurs options parmi un menu déroulant. Lorsque l'une des options est sélectionnée, elle se voit ajouter la propriété selected.

<select id="exemple3" multiple>
  <option value="">Faites votre choix</option>
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3" selected>3</option>
</select>

Pour identifier le menu on lui attribut un ID, puis on utilise boucle for pour parcourir les différentes options du menu et on supprime la propriété selected si elle est présente.

Puis on utilise le paramètre JavaScript selectedIndex avec la valeur 0 pour repositionner le sélecteur sur la première option ; la valeur 1 correpond à la 2ème option du menu select, la valeur 2 à la 3ème option, etc.

Cette solution permet de ré-initialiser une menu select simple, ainsi qu'un menu select multiple.

<select id="exemple3" multiple>
  <option disabled>Faites votre choix</option>
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3" selected>3</option>
</select>
<button type="button" onclick="doResetSelectSimple('exemple3');">Ré-initialiser le menu</button>
<script>
function doResetSelectSimple(id) {
  var menu = document.getElementById(id);
  var option;
  for (vari=0;i<menu.options.length;i++) {
    option = menu.options[i];
    option.removeAttribute('selected');
  }
  menu.selectedIndex = "0"; 
}
</script>

Voici le code ci-avant en action pour ré-initialiser un menu select et le repositoonner sur sa première option :

Vider une balise HTML textarea

De la même manière que les éléments ci-avant, on identifie une balise textarea en lui attribuant un ID.

<textarea id="exemple4" rows="3">Un contenu d'exemple</textarea>

On utilise ensuite la propriété JavaScript innerHTML pour identifier le contenu de la balise textarea.

Il ne reste plus qu'à définir ce contenu sur une valeur nulle pour vider le contenu de la balsie textarea.

<textarea id="exemple4" rows="3">Un contenu d'exemple</textarea>
<button type="button" onclick="doResetTextarea('exemple4');">Vider le textarea</button>
<script>
function doResetTextarea(id) {
  var textarea = document.getElementById(id);
  textarea.innerHTML= "";
}
</script>

Voici le code ci-avant en action pour vider une balise HTML textarea :

Vider l'ensemble d'un formulaire HTML en JavaScript

Pour ré-initialiser l'ensemble d'un formulaire, on identifie tout d'abord son conteneur. Dans mon exemple il s'agit d'une balise <div id="formlaire"> ; cette balise contient l'ensemble des éléments du formulaire.

<div id="formulaire">
<div class="form-group">
  <label class="mb-3" for="exemple">Un input du type text:</label>
  <input type="text" id="exemple1" class="form-control mb-3" name="nom" value="Un input du type text">
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="exemple2" name="nom" value="exemple 2" checked>
  <label class="form-check-label" for="exemple2">Une case qui est cochée</label>
</div>
<p>Un groupe de cases à cocher du type radio :</p>
<div class="form-check">
  <input class="form-check-input" type="radio" name="cases2" id="case4">
  <label class="form-check-label" for="case4">
    Case radio 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="cases2" id="case5" checked>
  <label class="form-check-label" for="case5">
    Case radio 2
  </label>
</div>
<div class="form-check mb-3">
  <input class="form-check-input" type="radio" name="cases2" id="case6">
  <label class="form-check-label" for="case6">
    Case radio 3
  </label>
</div>
<p>Un menu select multiple :</p>
<select class="form-select mb-3" aria-label="Menu Select simple" id="exemple3" multiple>
  <option disabled>Faites votre choix</option>
  <option value="1">Option une</option>
  <option value="2" selected>Option deux</option>
  <option value="3" selected>Option trois</option>
</select>
<div class="form-group">
  <label for="exemple4">Un textarea:</label>
  <textarea class="form-control mt-3 mb-3" id="exemple4" rows="3">Un textarea</textarea>
</div>
<p class="text-end"><button type="button" class="btn btn-success" onclick="doReset('formulaire');">Ré-initialiser tout le formulaire</button></p>
</div>

De la même manière que les exemples précédents on exécute via un bouton une fonction JavaScript où l'on passe en argument l'id du conteneur onclick="doReset('formulaire');".

Cette fonction exécute une autre fonction qui parcourt de manière récursive l'ensemble des balises html incluses dans le conteneur ; pour cela on utilise la propriété JavaScript children, elle identifie toutes les balises dites "enfant" du conteneur.

On utilise ensuite les propriétés tagName et type pour identifier s'il s'agit d'une balise correspondant à un élément du formulaire, puis le cas échéant, on réinitialise la balise en utilisant les méthodes évoquées précédemment.

<script>
function parcourir(el) {
  for (let i = 0, total = el.children.length; i < total; i++) {
    if (el.children[i].tagName == "INPUT" && (el.children[i].type == "text" || el.children[i].type == "file"))
    {
      el.children[i].value = "";
    }
    else if (el.children[i].tagName == "INPUT" && (el.children[i].type == "checkbox" || el.children[i].type == "radio"))
    {
      el.children[i].checked= false;
    }
    else if (el.children[i].tagName == "OPTION")
    {
      el.children[i].removeAttribute('selected');
    }  
    else if (el.children[i].tagName == "TEXTAREA")
    {
      el.children[i].innerHTML = "";
    } 
    else if (el.children[i].children.length)
    {
      parcourir(el.children[i]);
    }
  }
}
function doReset(id) {
  const formulaire = document.getElementById(id);
  parcourir(formulaire);
}
</script>

Voici le code ci-avant en action pour vider l'ensemble d'un formulaire avec javaScript :

Un groupe de cases à cocher du type radio :

Un menu select multiple :

Ce contenu vous a-t-il été utile ?

Autres publications dans la catégorie <javascript>