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>

Multiple File Upload with iFrame

Our GM assign me to do multiple file upload program. At that time, I was supposed to implement with Ajax. But, one of my friends told me that Ajax cannot handle completely if clients upload serveral files. That’s why I have an idea to implement this program with iFrame.

Index.php

<iframe src=”upload.php” style=”width:260px;height:100px;” frameborder=”0″></iframe><br />
<iframe src=”upload.php” style=”width:260px;height:25px;” frameborder=”0″></iframe><br />
<iframe src=”upload.php” style=”width:260px;height:25px;” frameborder=”0″></iframe><br />

Upload.php

<script type=”text/javascript”>
function startUpload(){
if (document.getElementById(‘message’) != undefined) {
document.getElementById(‘message’).style.display = ‘none’;
}
document.getElementById(‘process’).style.display = ‘block’;
document.getElementById(‘uploadfile’).style.visibility = ‘hidden’;
return true;
}
</script>

<form method=”post” name=”uploadform” enctype=”multipart/form-data”>
<div style=”text-align:center;”>
<?php
if ($_FILES){
if ($_FILES['file']['error'] > 0) {
echo “<p id=’message’ style=’display:block;’>Fout code: “.$_FILES['file']['error'].”
(<a href=’http://php.net/manual/nl/features.file-upload.errors.php’ target=’_blank’>php-error</a>)</p>”;
}
move_uploaded_file($_FILES['file']['tmp_name'],
“upload/” . $_FILES['file']['name']);
echo “<p id=’message’ style=’display:block;’>Upload!</p>”;
}
}
?>
<p id=”process” style=”display:none;”>
Uploaden…<br/>
<img src=”loader.gif” alt=”loading” />
</p>
<input type=”file” name=”file” id=”uploadfile” onchange=”startUpload();document.uploadform.submit();” />
</div>
</form>

It’s simple, isn’t it?