Comment réinitialiser un champ HTML après sa validation ?

Réponses rédigées par Antoine

Dernière mise à jour : 2023-04-03 18:47:34

Question

Comment réinitialiser un champ à chaque fois que le message est validé pour éviter de devoir le supprimer manuellement afin d'optimiser l'ergonomie d'un site web, en javascript.

Réponse

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 ="".

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 validation de votre formulaire.

<button type="button" onclick="doReset('exemple');">Valider</button>

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

<input type="text" id="exemple" name="nom" value="un contenu d'exemple">
<button type="button" onclick="doReset('exemple');">Valider</button>
<script>
function doReset(id) {
    var input = document.getElementById(id);
    input.value = "";
}
</script>