Javascript - ajouter dynamiquement des champs de saisie

J'ai un code pour ajouter dynamiquement des champs de saisie dans js. Mais le problème est que si j'ajoute 3 champs ou plus et que je parcours un fichier (si le champ de saisie est un fichier), la valeur du champ sélectionné disparaît. Peut-on aiderJavascript - ajouter dynamiquement des champs de saisie

Heres mon code

Merci à l'avance. :)

<!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>

Source

2010-06-16 Neeraj

obtenir le nom du fichier d'entrée de fichier est désactivé dans IE8 et firefox3, check

Source

2010-06-16 12:23:40 qqryq

D'accord, mais le problème est ici quand j'ajoute entrée supplémentaire 3 fichier, puis parcourez un fichier, puis-je ajouter à nouveau une entrée de fichier, la valeur des entrées de fichiers précédemment sélectionnés disparaissent. Je vous ai eu pour votre point mentionné ci-dessus user32167 mais le problème ici est complètement différent ... :) – Neeraj

J'ai modifier ce code pour ajouter dynamiquement et supprimer les fichiers d'entrée. il ne supprime pas les fichiers de navigation précédents lors de l'ajout d'un nouveau fichier. espérons que ce code est utile pour vous

<!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>

Source

2012-10-09 07:27:51

Javascript - ajouter dynamiquement des champs de saisie

Répondre

Questions connexes