recherche

Maison >interface Web >js tutoriel >Comment générer dynamiquement des éléments de formulaire de saisie en JavaScript ?

Comment générer dynamiquement des éléments de formulaire de saisie en JavaScript ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-28 06:38:02357parcourir

How to Dynamically Generate Input Form Elements in JavaScript?

Création dynamique d'éléments de formulaire de saisie

Cet article aborde un défi de programmation courant : la création dynamique d'éléments de formulaire de saisie en fonction de la saisie de l'utilisateur. L'objectif est de fournir une solution claire et simple aux débutants, en utilisant JavaScript.

Le problème

Une page Web comprend un champ de saisie de texte dans lequel les utilisateurs peuvent saisir un numéro. En cliquant sur un lien correspondant, la page doit générer dynamiquement autant de champs de saisie pour que l'utilisateur puisse fournir des informations supplémentaires. Les utilisateurs peuvent saisir un maximum de 10 valeurs.

Comprendre la solution

  1. Récupérer les entrées de l'utilisateur :

    • Un Le gestionnaire d'événements onclick est appliqué au lien responsable de la génération des champs de saisie.
    • Dans le gestionnaire d'événements, la valeur saisie dans le champ de saisie de texte peut être récupérée à l'aide de document.getElementById().

  2. Création du conteneur :

    • Un élément conteneur, tel qu'un div avec un attribut id (par exemple, "conteneur"), est nécessaire pour contenir les champs de saisie générés dynamiquement.

  3. Génération dynamique d'éléments :

    • Utilisation de document.createElement(), nouveau des éléments d'entrée peuvent être créés.
    • Des attributs tels que le type et le nom doivent être définis pour chaque entrée.
    • appendChild() est utilisé pour ajouter chaque élément d'entrée au conteneur.

  4. Effacer les éléments précédents :

    • Pour éviter les doublons, tous les éléments enfants existants dans le conteneur doivent être supprimés avant d'en générer de nouveaux. Cela peut être fait en utilisant hasChildNodes() et removeChild().

  5. Améliorations supplémentaires :

    • Vous pouvez ajouter des éléments comme des sauts de ligne (document.createElement("br")) ou des nœuds de texte (document.createTextNode()) pour améliorer la mise en page.

Exemple de code

L'extrait de code suivant démontre la mise en œuvre de la solution :

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Get number of inputs
            var number = document.getElementById("member").value;

            // Get container
            var container = document.getElementById("container");

            // Clear container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }

            // Generate inputs
            for (i=0;i<number;i++){
                // Text node
                container.appendChild(document.createTextNode("Member " + (i+1)));

                // Input element
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);

                // Line break
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

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!

JavaScript for using Attribute Event append number this input
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment suspendre gracieusement l'exécution jusqu'à la fin d'une fonction asynchrone ?Article suivant：Comment suspendre gracieusement l'exécution jusqu'à la fin d'une fonction asynchrone ?

Articles Liés

Voir plus