Comment créer un <input type="text"/> dynamiquement ?

Question

Je souhaite créer dynamiquement une entrée de type texte dans mon formulaire web. Plus précisément, j'ai un champ de texte dans lequel l'utilisateur entre le nombre de champs de texte souhaités ; je veux que les champs de texte soient générés dynamiquement dans le même formulaire.

Comment faire ?

Answer 1

Avec JavaScript :

var input = document.createElement("input");
input.type = "text";
input.className = "css-class-name"; // set the CSS class
container.appendChild(input); // put it into the DOM

Answer 2

En utilisant Javascript, tout ce dont vous avez besoin est document.createElement y setAttribute .

var input = document.createElement("input");
input.setAttribute('type', 'text');

Vous pouvez alors utiliser appendChild pour ajouter l'élément créé à l'élément parent souhaité.

var parent = document.getElementById("parentDiv");
parent.appendChild(input);

Answer 3

Créer le nombre de champs de saisie donnés par l'utilisateur

---

1. Obtenir de l'utilisateur le nombre de champs de texte et l'affecter à une variable.

   var no = document.getElementById("idname").value

---

2. Pour créer des champs de saisie, utilisez createElement et spécifier le nom de l'élément, c'est-à-dire "input", en tant que paramètre comme ci-dessous et l'assigner à une variable.

   var textfield = document.createElement("input");

---

3. Attribuez ensuite les attributs nécessaires à la variable.

   textfield.type = "text";

   textfield.value = "";

---

4. Enfin, la variable est ajoutée à l'élément du formulaire à l'aide de appendChild afin que l'élément de saisie soit créé dans l'élément de formulaire lui-même.

   document.getElementById('form').appendChild(textfield);

---

5. Bouclez les étapes 2, 3 et 4 pour créer le nombre désiré d'éléments d'entrée donnés par l'utilisateur à l'intérieur de l'élément de formulaire.

   for(var i=0;i<no;i++) {           
       var textfield = document.createElement("input");
       textfield.type = "text"; textfield.value = "";
       document.getElementById('form').appendChild(textfield);
   }

---

Voici le code complet

function fun() {
    /*Getting the number of text fields*/
    var no = document.getElementById("idname").value;
    /*Generating text fields dynamically in the same form itself*/
    for(var i=0;i<no;i++) {
        var textfield = document.createElement("input");
        textfield.type = "text";
        textfield.value = "";
        document.getElementById('form').appendChild(textfield);
    }
}

<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>

Answer 4

Voir cette réponse pour une solution sans JQuery. Ça m'a bien aidé !

Ajout dynamique d'éléments de saisie au formulaire

Answer 5

Peut-être que la méthode document.createElement(); est ce que vous recherchez.