Javascript - dynamically add input fields
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:addI开发者_JAVA技巧nput()">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>
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>
getting file name from file input is disabled in IE8 and firefox3, check
加载中,请稍侯......
精彩评论