Vous pourriez utiliser un onclick afin d'obtenir la valeur de saisie du champ de texte. Veillez à donner au champ un nom unique id afin de pouvoir y faire référence en toute sécurité par l'intermédiaire de document.getElementById() :
Si vous voulez ajouter des éléments de manière dynamique, vous devez disposer d'un conteneur où les placer. Par exemple, un <div id="container"> . Créer de nouveaux éléments au moyen de document.createElement() et utiliser appendChild() pour ajouter chacun d'entre eux au conteneur. Vous pourriez être intéressé par la sortie d'un fichier significatif name (par exemple, l'attribut name="member"+i pour chacun des éléments générés dynamiquement <input> s s'ils doivent être soumis dans un formulaire.
Remarquez que vous pourriez aussi créer <br/> éléments avec document.createElement('br') . Si vous souhaitez simplement afficher du texte, vous pouvez utiliser la fonction document.createTextNode() à la place.
De plus, si vous souhaitez vider le conteneur chaque fois qu'il est sur le point d'être rempli, vous pouvez utiliser la commande suivante hasChildNodes() y removeChild() ensemble.
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Generate a dynamic number of inputs
var number = document.getElementById("member").value;
// Get the element where the inputs will be added to
var container = document.getElementById("container");
// Remove every children it had before
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a 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>
Voir un exemple de travail dans cette JSFiddle .
