web-dev-qa-db-fra.com

Comment créer <input type = “text” /> dynamiquement

Je souhaite créer dynamiquement un texte de type saisie dans mon formulaire Web. Plus précisément, j'ai un champ de texte où 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 je fais ça?

javascripthtmlformswebforms
67
Mohammad Usman

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
140
Zach

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

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

Ensuite, vous pouvez utiliser appendChild pour ajouter l’élément créé à l’élément parent souhaité.

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

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

3
Eliasdx

Vous pouvez faire quelque chose comme ceci dans une boucle en fonction du nombre de champs de texte entrés.

$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform');

Mais pour de meilleures performances, je créais tout le code HTML en premier et ne l'injectais dans le DOM qu'une seule fois.

var count = 20;
var html = [];
while(count--) {
  html.Push("<input type='text' name='name", count, "'>");
}
$('#myform').append(html.join(''));

Edit Cet exemple utilise jQuery pour ajouter le code HTML, mais vous pouvez facilement le modifier pour utiliser innerHTML.

2
daniellmb

Je pense que le lien suivant vous aidera. Si vous souhaitez générer des champs de manière dynamique et que vous souhaitez également les supprimer en même temps, vous pouvez obtenir de l'aide à partir d'ici. J'ai eu la même question, donc j'ai eu la réponse

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2  ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

http://jsfiddle.net/jaredwilli/tZPg4/4/

2
user1477132

Voir cette réponse pour une solution non JQuery. Vient de m'aider!

Ajout dynamique d'éléments de saisie dans le formulaire

2
jaaq

Vous pouvez utiliser la méthode createElement() pour créer cette zone de texte.

2
Sean

Voici ma solution

function fun() {
/*getting the number of text field*/
var no = document.getElementById("idname").value;
/*text fields to be generated dynamically in the same form*/
  for(var i=0;i<no;i++) 
   {
    var textfield = document.createElement("input");
    textfield.type = "text";
    textfield.id = "idname4textfeild"; 
    textfield.setAttribute("value","");
    document.getElementById('form').appendChild(textfield);
  }
}
<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>
0
zero