web-dev-qa-db-fra.com

Comment ajouter des zones de texte de manière dynamique en Javascript?

Par défaut, j'ai 5 zones de texte. Lorsqu'un utilisateur clique sur un bouton, une zone de texte doit être ajoutée.

Comment pourrais-je faire ça?

javascriptdomtextbox
12
noob

Si vous remplacez innerHTML, les valeurs entrées précédemment seront effacées. Pour éviter cela, vous pouvez ajouter les éléments d'entrée par programmation:

var input = document.createElement('input'); 
input.type = "text"; 
//...    
container.appendChild(input);

Vérifiez ceci exemple.

21
CMS

Fonction Javascript 

function add() {

//Create an input type dynamically.
var element = document.createElement("input");

//Create Labels
var label = document.createElement("Label");
label.innerHTML = "New Label";     

//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("style", "width:200px");

label.setAttribute("style", "font-weight:normal");

// 'foobar' is the div id, where new fields are to be added
var foo = document.getElementById("fooBar");

//Append the element in page (in span).
foo.appendChild(label);
foo.appendChild(element);
}

Partie html,

<button id="button" value="Add" onClick:"javascript:add();">

Et c'est fait!

10
Robin C Samuel
<script>
function add()
{
    var inpt = document.getElementById('input_template');
    inpt.parentNode.appendChild(inpt.cloneNode(false));
}
</script>

<input type="button" onclick="add();">

set id = input_template sur l'un des champs de texte prédéfinis

1
w35l3y
<script>
function add()
{
    document.getElementById("place").innerHTML="<input type='text' value=''>"
}
</script>
<input type="button" value="clickMe" onClick="add();">
<div id="place"></div>
1
x2.
<!DOCTYPE html>
<html>
<body>
 <h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 <button type="button" onclick="myFunction()">Click me!</button>
 <script>
 var count =0;
 function myFunction() {
 count++
  document.write('Lable1');
  document.write('<input type="text" name="one+count">');
  document.write('Lable2');
  document.write('<input type="text" name="two+count">');

  document.write('Lable3'); 
  document.write('<input type="text" name="three+count">');

  document.write('Lable4');
  document.write('<input type="text" name="four+count">');

  document.write(count);

  }
  </script>

  </body>
  </html>
0
vatsal

Le mieux serait d’attacher un événement à la onclick du bouton, ce qui définira la visibilité d’une div sur inline. C’est à peu près la meilleure façon de procéder, compte tenu de la flexibilité et de la robustesse.

Avoir un regardez ici par exemple le code.

0
Kyle Rozendo