Comment puis-je créer des éléments de formulaire de saisie dynamique basés sur la saisie de l'utilisateur ?

Génération dynamique d'éléments de formulaire de saisie en fonction de la saisie de l'utilisateur

Énoncé du problème

Création d'éléments de formulaire de saisie dynamique basés sur un numéro spécifique fourni par l'utilisateur peut être une tâche ardue. Plusieurs ressources en ligne proposent des solutions complexes, qui peuvent être intimidantes pour les utilisateurs recherchant une approche plus simple.

Solution

Dans cette approche simplifiée, nous allons créer dynamiquement des champs de saisie basés sur une valeur numérique saisie par le utilisateur.

1. Récupérer la saisie de l'utilisateur

À l'aide de Javascript, nous pouvons récupérer la valeur entière saisie par l'utilisateur dans le champ de saisie "Nombre de membres".

<code class="javascript">var number = document.getElementById("member").value;</code>

2. Créer un élément conteneur

Nous avons besoin d'un élément conteneur pour contenir les champs de saisie générés dynamiquement. Créez un conteneur div avec un identifiant "conteneur" à cet effet.

<code class="html"><div id="container"></div></code>

3. Générer dynamiquement des champs de saisie

Parcourez le numéro saisi par l'utilisateur, en créant et en ajoutant des champs de saisie à l'élément conteneur. N'oubliez pas d'attribuer des noms uniques à ces champs pour une soumission correcte du formulaire.

<code class="javascript">for (i=0;i<number;i++){
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);
  container.appendChild(document.createElement("br"));
}

4. Gestionnaire d'événements pour la soumission

Attribuez un gestionnaire d'événements au lien "Remplir les détails" qui déclenche la fonction ci-dessus, générant ainsi le nombre nécessaire de champs de saisie.

<code class="html"><a href="#" id="filldetails" onclick="addFields()">Fill Details</a></code>

5. Effacer le conteneur avant de repeupler

Pour éviter la duplication des entrées lorsque plusieurs soumissions de formulaire sont effectuées, il est recommandé d'effacer l'élément conteneur avant de le repeupler avec de nouveaux champs de saisie.

<code class="javascript"> while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
}</code>

En suivant ces étapes, vous pouvez créer dynamiquement un nombre spécifié d'éléments de formulaire de saisie, rendant la solution à la fois efficace et conviviale.

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!