JavaScript : comment réinitialiser un formulaire en jQuery avec la méthode .reset() ?
La méthode reset() est une méthode JavaScript qui réinitialise un formulaire. Voici comment l'utiliser.
La méthode reset() est une méthode JavaScript qui réinitialise un formulaire. Elle vide chaque champ et le formulaire devient totalement vierge.
<form id=formulaire> <input type=texte name=test/> <button id=boutonReset>Vider le formulaire</button> </form>
Pour que la remise à zéro du formulaire fonctionne, il est important que le formulaire soit bien sélectionné correctement. Le sélecteur de JQuery sur l'identifiant est une bonne méthode pour récupérer le formulaire. Si jamais la méthode ne fonctionne pas, il existe plusieurs possibilités d'erreurs.
Il faut d'abord vérifier que le formulaire est correctement récupéré. Pour cela, la méthode console.log() affiche dans la console du navigateur le contenu d'une variable.
console.log($(#formulaire));
Si la console n'indique pas un formulaire, alors, il y a un conflit d'identifiant sur votre page. Un autre élément avec le même identifiant est sélectionné à la place de votre formulaire. Il faut modifier les identifiants pour être sûr que chaque identifiant est unique.
Une autre erreur possible est l'utilisation directe d'un objet JQuery. La méthode reset() est une méthode de l'API DOM de JavaScript. Ce n'est pas une méthode issue de la bibliothèque JQuery. Appeler la méthode à partir d'un objet JQuery ne fonctionnera pas. Il faut au préalable le transformer en élément du DOM. Pour cela, on peut tout simplement signifier que l'on récupère le premier élément de la sélection, soit en l'indiquant comme un tableau avec des crochets, soit à l'aide la méthode get() de JQuery qui retourne un élément JavaScript du sélecteur à l'index indiqué.
$(#formulaire).reset(); //Ne fonctionne pas $(#formulaire)[0].reset(); //Fonctionne $(#formulaire).get(0).reset(); //Fonctionne
Pour que le code fonctionne sur le formulaire donné en exemple, il suffit d'ajouter l'événement click sur le bouton et d'y intégrer la fonction reset(). Il faut faire également attention à l'identifiant du bouton, comme vu précédemment avec le formulaire.
$(#boutonReset).click(function() {
$(#formulaire)[0].reset();
});