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

Vous pourriez faire quelque chose comme cela dans une boucle basée sur le nombre de champs de texte qu'ils saisissent.

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

Mais pour de meilleures performances, je créerais d'abord tout le html et ne l'injecterait 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(''));

Editer cet exemple utilise jQuery pour ajouter le html, mais vous pourriez facilement le modifier pour utiliser innerHTML également.

Answer 2

L'idée centrale de la solution est la suivante :

• créer un nouveau input élément
• Ajouter le type text
• ajouter l'élément au DOM

Cela peut être fait via ce simple script :

var input = document.createElement('input');
input.setAttribute('type', 'text');
document.getElementById('parent').appendChild(input);

La question est maintenant de savoir comment rendre ce processus dynamique. Comme indiqué dans la question, il existe une autre entrée dans laquelle l'utilisateur insère le nombre d'entrées à générer. Cela peut se faire de la manière suivante :

function renderInputs(el){
  var n = el.value && parseInt(el.value, 10);
  if(isNaN(n)){
    return;
  }

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

  cleanDiv(parent);
  for(var i=0; i<n; i++){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    parent.appendChild(input);
  }
}

function cleanDiv(div){
  div.innerHTML = '';
}

Insert number of input to generate: </br>
<input type="text" onchange="renderInputs(this)"/>

<div id="parent">
Generated inputs:
</div>

mais en général, l'ajout d'une simple entrée n'est pas vraiment utile, il serait préférable d'ajouter un nom à l'entrée, de sorte qu'elle puisse être facilement envoyée en tant que formulaire. Ce snippet ajoute également un nom :

function renderInputs(el){
  var n = el.value;
  var input, label;
  var parent = document.getElementById("parent");
  cleanDiv(parent);

  el.value.split(',').forEach(function(name){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', name);
    label = document.createElement('label');
    label.setAttribute('for', name);
    label.innerText = name;
    parent.appendChild(label);
    parent.appendChild(input);
    parent.appendChild(document.createElement('br'));
  });
}

function cleanDiv(div){
  div.innerHTML = '';
}

Insert the names, separated by comma, of the inputs to generate: </br>
<input type="text" onchange="renderInputs(this)"/>
<br>
Generated inputs: </br>
<div id="parent">

</div>

Answer 3

Vous pouvez utiliser createElement() pour créer cette boîte de texte

Answer 4

Je pense que le lien suivant vous aidera. Si vous voulez générer des champs dynamiquement et les supprimer en même temps, vous pouvez obtenir de l'aide ici. J'ai eu la même question, et j'ai obtenu 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/

Answer 5

Vous pouvez utiliser les back quits d'ES6

  var inputs = [
        `<input type='checkbox' id='chbox0' onclick='checkboxChecked(this);'> <input  type='text' class='noteinputs0'id='note` + 0 + `' placeholder='task0'><button  id='notebtn0'                     >creat</button>`, `<input type='text' class='noteinputs' id='note` + 1 + `' placeholder='task1'><button  class='notebuttons' id='notebtn1' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 2 + `' placeholder='task2'><button  class='notebuttons' id='notebtn2' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 3 + `' placeholder='task3'><button  class='notebuttons' id='notebtn3' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 4 + `' placeholder='task4'><button  class='notebuttons' id='notebtn4' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 5 + `' placeholder='task5'><button  class='notebuttons' id='notebtn5' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 6 + `' placeholder='task6'><button  class='notebuttons' id='notebtn6' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 7 + `' placeholder='task7'><button  class='notebuttons' id='notebtn7' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 8 + `' placeholder='task8'><button  class='notebuttons' id='notebtn8' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 9 + `' placeholder='task9'><button  class='notebuttons' id='notebtn9' >creat</button>`
    ].sort().join(" ");
   document.querySelector('#hi').innerHTML += `<br>` +inputs;

<div id="hi"></div>