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>

Jiwanjot Singh · Accepted Answer · 2012-10-09 07:27:51Z

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>

Community · Accepted Answer · 2017-05-23 12:26:47Z

0

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

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jun 16, 2010 at 12:23

qqryq

1,9443 gold badges18 silver badges21 bronze badges

1 Comment

Neeraj Over a year ago

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...:)

Collectives™ on Stack Overflow

Javascript - dynamically add input fields

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related