如何使用 JavaScript 创建动态/多个<textarea>



我想使用Javascript添加多个textarea,作为no_of_description输入HTML标记中描述的用户输入编号。

这是我的代码:

<div class="container">
<label for="no_of_description">No of Description</label>
<input type="number" id="no_of_description" name="no_of_description" value="1">

<hr/>
<form class="form" action="" method="POST">
<!-- if  no_of_description is 1 (default)-->
<div class="form-group">
<label for="description_1">Description 1</label>
<textarea class="form-control" id="description_1" rows="3" cols="8"></textarea>
</div>

<!-- if no_of_description is 2, another description be added using javascript-->

<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

Follo下面动态创建html表单字段的方法。

<html>
<head>
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("TextBox " + (i+1)));
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of TextBox:<br />
<a href="#" id="filldetails" onclick="addFields()">Add</a>
<div id="container"/>
</body>
</html>

相关内容

最新更新