Existe-t-il un bouton de réinitialisation en JavaScript ?

JavaScript est un langage de programmation largement utilisé qui peut être combiné avec HTML et CSS pour rendre les sites Web et les applications Web plus interactifs et dynamiques. Cependant, lorsque vous utilisez JavaScript, vous devrez peut-être réinitialiser le formulaire, ce qui est une exigence courante. Dans cet article, nous explorerons le bouton de réinitialisation en JavaScript et comment l'utiliser.

Tout d'abord, il doit être clair que l'élément de formulaire est l'un des éléments les plus importants des formulaires HTML. Il est utilisé pour capturer les données saisies par l'utilisateur et les soumettre au serveur pour traitement. Dans l'élément de formulaire, vous pouvez ajouter des boutons, notamment des boutons, des boutons de soumission, des boutons de réinitialisation, etc. Parmi eux, le bouton de réinitialisation permet de réinitialiser toutes les données du formulaire aux valeurs par défaut ou aux valeurs vides.

En JavaScript, il existe plusieurs façons d'implémenter la fonctionnalité du bouton de réinitialisation. Ci-dessous, nous présenterons ces méthodes une par une.

1. Utilisez la méthode de réinitialisation de l'élément de formulaire

En JavaScript, l'élément de formulaire possède une méthode intégrée appelée reset(), qui peut être utilisée pour réinitialiser tous les champs de saisie et options du formulaire. Par exemple :

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="reset" value="Reset">
</form>

<script>
  var myForm = document.getElementById("myForm");
  myForm.addEventListener("reset", function(event){
    console.log("表单已重置");
  });
</script>

Dans le code ci-dessus, l'élément de formulaire contient un champ de saisie et une zone de liste déroulante, ainsi qu'un bouton de réinitialisation du type. Lorsque l'utilisateur clique sur le bouton de réinitialisation, la méthode reset() de l'élément de formulaire est déclenchée, réinitialisant tous les champs de saisie et options du formulaire à leurs valeurs par défaut ou vides. Dans le même temps, le code JavaScript ci-dessus écoute également l'événement de réinitialisation du formulaire. Lorsque le formulaire est réinitialisé, un message sera imprimé sur la console.

2. Construisez un nouveau formulaire et remplacez-le par l'ancien

Une autre façon d'implémenter la fonctionnalité du bouton de réinitialisation consiste à construire un nouveau formulaire et à le remplacer par l'ancien formulaire. Par exemple :

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="button" value="Reset" onclick="resetForm()">
</form>

<script>
  function resetForm() {
    var oldForm = document.getElementById("myForm");
    var newForm = document.createElement("form");
    newForm.id = "myForm";
    oldForm.parentNode.replaceChild(newForm, oldForm);
  }
</script>

Dans le code ci-dessus, l'élément form contient un champ de saisie et une zone de liste déroulante, ainsi qu'un bouton de type bouton. Lorsque l'utilisateur clique sur le bouton de réinitialisation, la fonction resetForm() est appelée, où l'ancien élément de formulaire est d'abord obtenu, puis un nouvel élément de formulaire est créé à l'aide de la méthode createElement() et le nouvel élément de formulaire est remplacé à l'aide de replaceChild( ) méthode Anciens éléments de formulaire. Cela équivaut à réinitialiser l’intégralité du formulaire.

Il convient de noter que lors de l'utilisation de cette méthode, certains attributs de formulaire, gestionnaires d'événements et autres informations peuvent être perdus, elle ne convient donc qu'à une simple réinitialisation de formulaire.

3. Réinitialiser manuellement la valeur de l'élément de formulaire

La dernière façon d'implémenter la fonction du bouton de réinitialisation consiste à réinitialiser manuellement la valeur de l'élément de formulaire. Par exemple :

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="button" value="Reset" onclick="resetForm()">
</form>

<script>
  function resetForm() {
    var inputs = document.getElementById("myForm").getElementsByTagName("input");
    for(var i=0; i<inputs.length; i++) {
      switch(inputs[i].type) {
        case "text":
          inputs[i].value = "";
          break;
        case "checkbox":
        case "radio":
          inputs[i].checked = false;
          break;
        default:
          break;
      }
    }
    
    var selects = document.getElementById("myForm").getElementsByTagName("select");
    for(var i=0; i<selects.length; i++) {
      selects[i].selectedIndex = 0;
    }
  }
</script>

Dans le code ci-dessus, l'élément form contient un champ de saisie et une zone de liste déroulante, ainsi qu'un bouton de type bouton. Lorsque l'utilisateur clique sur le bouton de réinitialisation, la fonction resetForm() est appelée, qui obtient d'abord tous les champs de saisie et les zones de liste déroulante des éléments du formulaire, et parcourt chaque élément pour réinitialiser leurs valeurs à la valeur par défaut ou à la valeur nulle. . Plus précisément, pour les zones de texte et les zones de mot de passe, définissez leurs valeurs sur vides ; pour les boutons radio et les cases à cocher, définissez leur statut sélectionné sur non coché ; pour les zones de liste déroulante, définissez leurs éléments sélectionnés sur Le premier élément.

Il convient de noter que si le formulaire contient d'autres types d'éléments de formulaire, tels que des champs de texte, des champs de mot de passe, des champs d'image, etc., ils doivent être réinitialisés en fonction de la situation spécifique.

Pour résumer, il existe de nombreuses méthodes en JavaScript pour réinitialiser le formulaire. Parmi elles, la méthode reset() fournie avec l'élément form est la plus simple et la plus directe. Mais si vous avez besoin de plus de flexibilité dans la personnalisation de la fonction de réinitialisation, vous pouvez utiliser les deux dernières méthodes. Quelle que soit la méthode utilisée, le besoin de réinitialisation du formulaire peut être facilement réalisé et offrir une meilleure expérience aux utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!