<html>
<head>
<title>Add Remove HTML Controls</title>
<script>
var arrInput = new Array(0);
var arrInputValue = new Array(0);
function addInput() {
arrInput.push(arrInput.length);
arrInputValue.push("");
display();
}
function display() {
document.getElementById('parah').innerHTML="";
for (intI=0;intI<arrInput.length;intI++) {
document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
}
}
function saveValue(intId,strValue) {
arrInputValue[intId]=strValue;
}
function createInput(id,value) {
return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
}
function deleteInput() {
if (arrInput.length > 0) {
arrInput.pop();
arrInputValue.pop();
}
display();
}
</script>
</head>
<body>
<p id="parah">Click below to dynamically add and remove input boxes</p>
<a href="javascript:addInput()">Add more input field(s)</a><br>
<a href="javascript:deleteInput()">Remove field(s)</a>
</body>
</html>
