fonction jQuery à toutes les données de formulaire claire

Cet article présente plusieurs façons pratiques d'utiliser JQuery pour effacer les données de la forme du site Web de Karl Swedberg. Ces méthodes peuvent effacer toutes les données du formulaire, y compris les cases d'entrée de texte, les listes déroulantes, les boutons radio, les cases à cocher, etc.

Méthode 1: fonction générale

La fonction suivante itère à travers tous les éléments d'entrée sous la forme et efface ses données en fonction du type d'élément:

function clearForm(form) {
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

Méthode 2: Bouton de réinitialisation

Vous pouvez ajouter un bouton de réinitialisation caché, puis le déclencher pour effacer le formulaire:

$('form > input[type=reset]').trigger('click'); // 假设表单中有一个设置为 display: none; 的重置按钮

Méthode 3: fonction d'élément jQuery

Cette méthode est plus pratique et peut être appliquée directement aux éléments DOM en tant que fonction jQuery:

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};
// 使用方法
$('#flightsSearchForm').clearForm();

FAQ (FAQ)

• Comment réinitialiser un formulaire en utilisant la méthode de réinitialisation de JQuery?

  La méthode

  jQuery's reset() est un moyen simple et efficace de nettoyer toutes les données de formulaire. Sélectionnez simplement le formulaire et appelez la méthode reset(). Par exemple: $('form')[0].reset(); Cela réinitialisera le premier formulaire sur la page.

• Quelle est la fonction de la méthode vide () de jQuery?

  La méthode

  empty() supprime tous les enfants et le contenu de l'élément sélectionné. Ceci est différent de la méthode reset(), qui efface uniquement les champs de forme et ne les supprime pas. Par exemple: reset() Cela supprimera tous les champs et contenus sous la forme $('#myForm').empty();. myForm

• Comment utiliser jQuery pour effacer toutes les entrées, sélections et champs cachés dans un formulaire?

  Vous pouvez utiliser la méthode

  de jQuery pour effacer toutes les entrées, sélections et champs cachés dans le formulaire. Par exemple: val() Cela effacera les valeurs de toutes les entrées, sélections et zones de texte sous la forme. $('form').find('input, select, textarea').val('');

• Comment effacer les champs de formulaire à l'aide de jQuery?

  le

  peut être utilisé pour sélectionner précisément les champs à effacer en utilisant la méthode et le sélecteur val(). Par exemple: $('#myForm').find('input:text, input:password, input:file, select, textarea').val(''); $('#myForm').find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected'); Cela effacera respectivement le texte, le mot de passe, le fichier, la sélection et les champs de zone de texte, et décochera les boutons radio et les cases.

• Quelle est la différence entre la méthode reset () de jQuery et la méthode vide ()?

  La méthode

  reset() efface les valeurs de tous les champs de forme et les restaure à leur état initial. La méthode empty() supprime tous les enfants et le contenu de l'élément sélectionné, ce qui signifie que la méthode empty() supprime les champs de formulaire, et pas seulement effacer leurs valeurs.

La méthode à choisir dépend de vos besoins et préférences spécifiques. La méthode 3 fournit une méthode de plug-in jQuery plus concise pour une réutilisation facile. N'oubliez pas d'ajuster le sélecteur en fonction de votre ID de formulaire.

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!