jQuery Academy · Leçon

Manipulation dynamique des champs de formulaire

Manipulation dynamique des champs de formulaire est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Formulaires dynamiques : pourquoi et comment

Les formulaires sont souvent statiques, mais les applications web modernes reposent sur l'interactivité. La manipulation dynamique des champs de formulaire vous permet de modifier la structure d'un formulaire en temps réel.

Vous pouvez ainsi ajouter, supprimer ou modifier des champs de saisie lorsque l'utilisateur interagit avec votre page. Vous offrez alors une bien meilleure expérience utilisateur et des formulaires plus adaptables !

Ajouter des champs : les bases

L'idée centrale pour ajouter des champs consiste à créer de nouveaux éléments HTML et à les insérer dans le Document Object Model (DOM).

Utilisez jQuery pour créer des éléments (par exemple, $('')).
Utilisez des méthodes comme .append(), .prepend(), .after() ou .before() pour les placer précisément dans votre formulaire.
N'oubliez pas de donner aux nouveaux champs des attributs name appropriés, notamment pour le traitement côté serveur.

Ajouter un champ de saisie d'adresse e-mail

Ajoutons un bouton qui, lorsqu'on clique dessus, génère un nouveau champ de saisie d'adresse e-mail. Remarquez comment nous créons la chaîne HTML, puis l'ajoutons.

<div id="email-fields">
  <input type="email" name="email[]" placeholder="Email 1">
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;
  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailField = `
      <input type="email" name="email[]" 
             placeholder="Email ${emailCount}">
    `;
    $('#email-fields').append(newEmailField);
  });
});
</script>

Supprimer des champs : nettoyage

Tout comme les utilisateurs peuvent avoir besoin d'ajouter des champs, ils doivent souvent aussi pouvoir en supprimer. Cela permet de conserver un formulaire clair et adapté à leurs besoins.

La méthode .remove() de jQuery est idéale pour cela. Elle retire entièrement du DOM le ou les éléments sélectionnés, ainsi que les données et gestionnaires d'événements qui leur sont associés.

Supprimer un champ de saisie spécifique

Étendons maintenant notre exemple précédent. Nous allons ajouter un bouton « Supprimer » à côté de chaque champ d'adresse e-mail. Un clic sur ce bouton supprimera le champ concerné.

Important : observez attentivement la manière dont nous gérons les événements des boutons « Supprimer » ajoutés dynamiquement !

<div id="email-fields">
  <div class="email-group">
    <input type="email" name="email[]" placeholder="Email 1">
    <button class="remove-email">Remove</button>
  </div>
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;

  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailGroup = `
      <div class="email-group">
        <input type="email" name="email[]" 
               placeholder="Email ${emailCount}">
        <button class="remove-email">Remove</button>
      </div>
    `;
    $('#email-fields').append(newEmailGroup);
  });

  // Event delegation for remove buttons
  $('#email-fields').on('click', '.remove-email', function() {
    $(this).parent('.email-group').remove();
  });
});
</script>

Modifier des champs : ajuster les attributs

Parfois, vous n'avez pas besoin d'ajouter ou de supprimer un champ, mais simplement de modifier ses propriétés. Il peut s'agir de sa value, de son placeholder, de son état disabled, ou encore de son name ou de son id.

jQuery fournit .attr() pour les attributs HTML et .prop() pour les propriétés du DOM. En général, .prop() est recommandé pour les attributs booléens comme checked, disabled ou selected.

Basculer l'état d'un champ

Voici un exemple dans lequel une case à cocher contrôle l'activation ou la désactivation d'un champ de saisie de texte. Nous utilisons .prop() pour modifier la propriété disabled.

<label>
  <input type="checkbox" id="enable-input"> Enable Input
</label>
<input type="text" id="my-input" value="Hello" disabled>

<script>
$(document).ready(function() {
  $('#enable-input').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('#my-input').prop('disabled', !isChecked); // Set disabled based on checkbox state
  });
});
</script>

Événements sur les éléments dynamiques

Un piège fréquent : les gestionnaires d'événements directs (comme $('#myButton').on('click', ...)) ne s'attachent qu'aux éléments présents lors du chargement de la page.

Pour les éléments ajoutés dynamiquement, vous devez utiliser la délégation d'événements. Cela consiste à attacher l'écouteur d'événements à un élément parent statique, puis à indiquer un sélecteur pour les éléments enfants dynamiques. La méthode .on() de jQuery gère cela très efficacement.

Exemple pratique : « Ajouter davantage »

En combinant ce que nous avons appris, voici un modèle courant : un bouton « Ajouter une compétence » qui permet aux utilisateurs de répertorier plusieurs compétences, chacune disposant de son propre bouton « Supprimer ».

Remarquez l'utilisation de data-id pour l'identification unique et de .closest() pour trouver l'élément parent à supprimer.

<div id="skill-list">
  <div class="skill-item" data-id="1">
    <input type="text" name="skill[]" placeholder="Skill 1">
    <button class="remove-skill">Remove</button>
  </div>
</div>
<button id="add-skill">Add Skill</button>

<script>
$(document).ready(function() {
  let skillId = 1; // Unique ID for each skill item

  $('#add-skill').on('click', function() {
    skillId++;
    const newSkillItem = `
      <div class="skill-item" data-id="${skillId}">
        <input type="text" name="skill[]" 
               placeholder="Skill ${skillId}">
        <button class="remove-skill">Remove</button>
      </div>
    `;
    $('#skill-list').append(newSkillItem);
  });

  // Event delegation for remove buttons
  $('#skill-list').on('click', '.remove-skill', function() {
    // Prevent removing the very first skill if desired
    if ($('.skill-item').length > 1) {
      $(this).closest('.skill-item').remove();
    } else {
      alert("You need at least one skill!");
    }
  });
});
</script>

Vérification des formulaires dynamiques

Testez votre compréhension de la manipulation dynamique des formulaires.

Récapitulatif : formulaires dynamiques

Dans cette leçon, vous avez appris à rendre les formulaires plus interactifs et conviviaux en ajoutant, supprimant et modifiant dynamiquement des champs avec jQuery.

Utilisez .append(), .prepend(), .after() et .before() pour ajouter des éléments.
Utilisez .remove() pour supprimer des éléments.
Utilisez .attr() et .prop() pour modifier les attributs et les propriétés des éléments.
Surtout, utilisez la délégation d'événements avec .on() pour gérer les événements des éléments ajoutés au DOM après le chargement initial de la page.

Ensuite, nous étudierons la validation des formulaires côté client !

Questions Fréquemment Posées

La leçon « Manipulation dynamique des champs de formulaire » est-elle gratuite ?

Oui — le texte complet de « Manipulation dynamique des champs de formulaire » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Manipulation dynamique des champs de formulaire » ?

Apprenez à ajouter, supprimer et modifier dynamiquement des champs de formulaire selon les saisies de l’utilisateur, afin de créer des interfaces de formulaire adaptables et interactives avec jQuery. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Manipulation dynamique des champs de formulaire » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Manipulation dynamique des champs de formulaire
Logique de validation des formulaires côté client
Envoi de formulaires AJAX et retour utilisateur

← Retour à jQuery Academy