Dynamically create textarea with Javascript

One of my projects need our clients to create textarea input dynamically with javascript. Seems it’s kinda simple but actually, create dynamically is simple but how to fetch data from these is kinda complicated. So, I reserach through and thinking of about that. Finally, I gotcha..!! Here you gooo…

Example.html

<form name=”mycomposeForm”>

<p id=”parah”></p>

<input type=”hidden” name=”mytextcount”>

<a href=”javascript:addInput()”>Add more input field(s)</a><br>
<a href=”javascript:deleteInput()”>Remove field(s)</a>

<form>

<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 “<textarea cols=’40′ rows=’5′ id=’test “+ id +”‘ name=’test “+ id +”‘ onChange=’javascript:saveValue(“+ id +”,this.value)’ value=’”+ value +”‘></textarea><br>”;

}

function deleteInput() {

if (arrInput.length > 0) {

arrInput.pop();

arrInputValue.pop();

}

display();

}

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 “<textarea cols=’40′ rows=’5′ id=’test “+ id +”‘ name=’test “+ id +”‘ onChange=’javascript:saveValue(“+ id +”,this.value)’ value=’”+ value +”‘></textarea><br>”;

}

function deleteInput() {

if (arrInput.length > 0) {

arrInput.pop();

arrInputValue.pop();

}

display();

}

</script>