Comment créer dynamiquement des éléments de formulaire de saisie en fonction du numéro spécifié par l'utilisateur ?

Création d'éléments de formulaire de saisie dynamique pour un numéro spécifié par l'utilisateur

Comprenant la tâche à accomplir, l'utilisateur a l'intention de générer dynamiquement des éléments de formulaire de saisie basés sur sur un entier fourni par l'utilisateur. L'objectif est de fournir une solution simple sans trop compliquer le processus.

En utilisant JavaScript, nous pouvons relever ce défi en suivant les étapes suivantes :

1. Récupérer l'utilisateur Entrée :

   • Utilisez un gestionnaire d'événements onclick pour le lien « Remplir les détails » afin de récupérer la valeur entière du champ de saisie.
   • Attribuez un attribut d'identifiant unique à l'entrée. champ, tel que « membre », pour accéder facilement à sa valeur.

2. Créer un conteneur pour les éléments d'entrée :

   • Définissez un élément conteneur, tel qu'un
     , où les éléments générés dynamiquement seront placés.

3. Générer des éléments d'entrée :

   • Parcourez une boucle en fonction de la valeur entière fournie par l'utilisateur.
   • Utilisez document.createElement() pour créer un nouveau éléments et définissez leurs attributs de type et de nom.
   • Ajoutez les éléments créés au conteneur spécifié à l'aide de appendChild().

4. Effacer les éléments précédents ( Facultatif) :

   • Si nécessaire, utilisez hasChildNodes() et removeChild() pour supprimer tous les éléments existants dans le conteneur avant d'en générer de nouveaux.

Extrait de code :

<code class="javascript">function addFields(){
    // Get user input for number of elements
    var number = document.getElementById("member").value;

    // Get the element where inputs will be placed
    var container = document.getElementById("container");

    // Remove any existing elements
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }

    // Create and append input elements
    for (i=0; i<number; i++){
        container.appendChild(document.createTextNode("Member " + (i+1)));
        var input = document.createElement("input");
        input.type = "text";
        input.name = "member" + i;
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}</code>

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!