Vider un formulaire HTML avec JavaScript

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>

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>

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>

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>

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>

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>