Javascript - dynamically add input fields

Question

I have a code to add input fields dynamically in js. But the problem is if i add 3 fields or more and then browse a file(if the input field is file), the value of the field selected disappears. Can any one help

Heres my code

Thanks in advance. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Husay :: http://www.communitxt.net */

var arrInput = new Array(0);
 var arrInputValue = new Array(0);
fields = 1;
maxInput = 4;
function addInput() {
 //arrInput.push(createInput(arrInput.length));
 if(fields <= maxInput){
     fields +=1;
     arrInput.push(arrInput.length);
     //arrInputValue.push(arrInputValue.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='file' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
}

function deleteInput() {
 if (arrInput.length > 0) {
    fields -=1;
    arrInput.pop();
    arrInputValue.pop();
 }
 display();
}
// End -->
</script>
</head>

<body>
<a href="javascript:addInput()">Add more input field(s)</a><br>
<a href="javascript:deleteInput()">Remove field(s)</a><br>
<input type="file" /><br>
<input type="file" /><br>
<input type="file" /><br>
<p id="parah"></p>


</body>
</html>

score 5 · Answer 1 · answered Oct 09 '12 at 07:27

I have edit this code to dynamically add and remove input files. it does not remove previous browse files on adding new file. hope this code is useful for you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
currentg1 = 2; // This is input files added by default.
maxg1 = 5;
ming1 = 1;

function g1_app_child(){
    if(currentg1<maxg1)
    {
        var div = document.createElement("div");
        div.id = 'divfiles'+currentg1;
        /*div.style.width = "100px";
        div.style.height = "100px";
        div.style.background = "red";
        div.style.color = "white";*/
        div.innerHTML = '<input type="file" name="files['+currentg1+']" id="file'+currentg1+'" value="" />';
        document.getElementById('outer_div').appendChild(div);
        currentg1++;
        return false;
    }
    else
    {
        alert('Maximum '+maxg1+' Files are Allowed.');
        return false;
    }
}

function g1_delchild()
{
    if(currentg1>ming1)
    {
        cnt = currentg1-1;
        element = document.getElementById('divfiles'+cnt);
        element.parentNode.removeChild(element);
        currentg1--;
        return false;
    }
    else
    {
        alert('Minimum '+ming1+' Files are Allowed.');
        return false;
    }
}
</script>
</head>

<body>
<a href="javascript:void();" onclick="g1_app_child()">Add more input field(s)</a><br>
<a href="javascript:void();" onclick="g1_delchild()">Remove field(s)</a><br>

<div id="outer_div">
    <div id="divfiles0"><input type="file" name="files[0]" id="file0" value="" /></div>
    <div id="divfiles1"><input type="file" name="files[1]" id="file1" value="" /></div>
</div>
</body>
</html>

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

getting file name from file input is disabled in IE8 and firefox3, check

edited May 23 '17 at 12:26

Community

1
1

answered Jun 16 '10 at 12:23

qqryq

1,814
3
18
20

Alright but the problem here is when I add extra 3 file input and then browse a file and then again i add a file input, the previously selected file inputs value will disappear. I got you for your point mentioned above user32167 but the problem here is completely different...:) – Neeraj Jun 16 '10 at 12:36

Javascript - dynamically add input fields

2 Answers2