jquery effacer l'entrée

JQuery Clear Input - Facilitez la saisie des formulaires

Dans le développement front-end, nous devons généralement utiliser des formulaires pour collecter les données saisies par l'utilisateur. Lorsque l'utilisateur termine sa saisie, nous devons effacer le contenu du formulaire pour faciliter la saisie suivante. En HTML traditionnel, nous pourrions ajouter un bouton de réinitialisation à chaque élément de formulaire, puis utiliser JavaScript pour effacer l'entrée. Cependant, cette méthode est non seulement lourde, mais présente également une faible tolérance aux pannes. L'utilisation de JQuery rend la suppression des entrées de formulaire plus facile et plus fiable.

Cet article présentera les méthodes et techniques de base d'utilisation de JQuery pour effacer les entrées, ainsi que les scénarios et techniques d'effacement des entrées couramment utilisés dans le développement réel, facilitant ainsi la saisie de votre formulaire.

1. Méthodes et techniques de base

1. Effacer le contenu d'une seule zone de saisie

Si vous avez uniquement besoin d'effacer le contenu d'une seule zone de saisie, vous pouvez utiliser la méthode .val().

Par exemple, si vous avez une zone de saisie avec l'ID "input1", vous pouvez utiliser le code suivant pour effacer le contenu de la zone de saisie :

$("#input1").val("");

2. Effacez le contenu de plusieurs zones de saisie

Si vous en avez besoin. pour effacer le contenu de plusieurs zones de saisie, vous pouvez utiliser des sélecteurs de classe pour sélectionner ces éléments. Par exemple, vous disposez de trois zones de saisie dont le nom de classe est "input". Vous pouvez utiliser le code suivant pour effacer le contenu de ces zones de saisie :

$(".input").val("");

3. besoin d'effacer le formulaire Vous pouvez utiliser le sélecteur d'éléments de formulaire pour sélectionner toutes les zones de saisie du formulaire, puis utiliser la méthode .val() pour effacer leur contenu.

Par exemple, si vous avez un formulaire avec l'ID "form1", vous pouvez utiliser le code suivant pour effacer le contenu de toutes les zones de saisie du formulaire :

$("#form1 :input").val("");

Dans le code ci-dessus, :input est un sélecteur spécial qui peut être sélectionné Toutes les zones de saisie, champs de texte, zones déroulantes, etc. dans les éléments de formulaire. Lorsque vous l'appelez à l'aide de la méthode .val(), il efface le contenu de ces éléments.

4. Effacer tout le contenu du formulaire

Si vous devez effacer tout le contenu du formulaire, y compris non seulement les zones de saisie, mais également les listes déroulantes, les cases radio, les cases à cocher, etc., vous pouvez utiliser l'option sélecteur d'élément de formulaire pour sélectionner l'élément de formulaire, puis réinitialiser le formulaire à l'aide de la méthode .reset().

Par exemple, si vous avez un formulaire avec l'ID "form1", vous pouvez utiliser le code suivant pour effacer tout le contenu du formulaire :

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

Dans le code ci-dessus, la méthode reset() effacera toutes les zones de saisie , listes déroulantes, les valeurs des boutons radio et des cases à cocher sont réinitialisées à leurs valeurs par défaut.

2. Scénarios et techniques courants

1. Effacez les valeurs par défaut dans le formulaire

Lorsque les zones de saisie, les listes déroulantes et d'autres éléments du formulaire ont des valeurs par défaut définies, si l'utilisateur souhaite à nouveau -enter, ils doivent supprimer manuellement ces valeurs par défaut. Pour réduire les efforts de l'utilisateur, vous pouvez utiliser JQuery pour effacer toutes les valeurs par défaut du formulaire après le chargement de la page.

Par exemple, vous avez un formulaire avec l'ID "form1" et vous définissez la valeur par défaut "Veuillez saisir le nom d'utilisateur" dans l'une des zones de saisie, vous pouvez utiliser le code suivant pour effacer la valeur par défaut de toutes les zones de saisie dans le formulaire :

$(document).ready(function(){
  $("#form1 :input").each(function(){
    if($(this).val() == $(this).attr("placeholder")){
      $(this).val("");
    }
  });
});

Dans le code ci-dessus, la fonction $(document).ready() sera exécutée une fois la page chargée, puis la fonction .each() sera utilisée pour parcourir toutes les zones de saisie du formulaire. Si la valeur dans la zone de saisie est égale à la valeur de l'attribut d'espace réservé correspondant, utilisez la méthode .val() pour l'effacer. À ce stade, l'utilisateur peut saisir directement le contenu sans supprimer manuellement la valeur par défaut.

2. Opérations après avoir effacé le formulaire

Dans le développement réel, nous devons souvent effectuer certaines opérations après avoir effacé le formulaire. Par exemple, lorsqu'un formulaire est soumis avec succès, nous pouvons souhaiter effacer le formulaire et afficher un message de réussite. Pour éviter que l'utilisateur ne voie les éléments du formulaire devenir vides lors de leur effacement, nous pouvons masquer les éléments du formulaire avant d'effacer le formulaire, puis les afficher après les avoir effacés.

Par exemple, vous avez un formulaire avec l'ID "form1", et le formulaire sera soumis lorsque l'utilisateur clique sur le bouton de soumission. Pour éviter que l'utilisateur ne voie un formulaire vide pendant l'effacement du formulaire, vous pouvez utiliser le code suivant :

$("#submit_btn").click(function(){
  // 隐藏表单
  $("#form1 :input").hide();
  
  // 提交表单
  $.ajax({
    url: "submit.php",
    method: "post",
    data: $("#form1").serialize(),
    success: function(response){
      // 显示成功消息
      alert("提交成功！");
      
      // 清空表单
      $("#form1 :input").val("");
      
      // 显示表单
      $("#form1 :input").show();
    }
  });
});

Dans le code ci-dessus, lorsque l'utilisateur clique sur le bouton Soumettre, l'élément du formulaire est masqué. Les données du formulaire sont ensuite soumises au serveur à l'aide des méthodes AJAX. Si la soumission réussit, un message de réussite s'affichera. Ensuite, utilisez la méthode .val() pour effacer le contenu de toutes les zones de saisie du formulaire. Enfin, l'élément de formulaire est réaffiché.

Résumé

Cet article explique comment utiliser JQuery pour effacer la saisie afin de faciliter la saisie du formulaire. Les méthodes de base de saisie claire incluent l'effacement du contenu d'une seule zone de saisie, l'effacement du contenu de plusieurs zones de saisie, l'effacement du contenu de toutes les zones de saisie du formulaire et l'effacement de tout le contenu du formulaire. En outre, nous avons également introduit des scénarios et des techniques d'effacement des entrées qui sont couramment utilisés dans le développement réel, tels que l'effacement de la valeur par défaut dans le formulaire et les opérations après l'effacement du formulaire. Utilisez ces conseils pour rendre la saisie du formulaire de compensation plus facile et plus fiable.

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!