Bien le bonjour !
J'ai un petit problème en ce moment même !
Je crée (à l'aide d'une fonction javascript) un formulaire contenant un input file et je lui ai mis l'évènement onchange devant ajouter un autre input file.
Le problème, c'est que lorsque l'input file change de valeur, le champ suivant apparait bien, mais le premier perd sa valeur actuelle.
Je ne sais pas trop si j'ai fait quelque chose de mal, ou si c'est normal
Pourriez vous m'expliquer ?
Voilà le code :

nb_champs=1;
function add_photo(){
                corps=document.getElementById("corps");
                corps.innerHTML="<center>Ajouter une Photo</center><br>";
                corps.innerHTML+="<center><form method='post' action='add.php' onsubmit='' id='form_add_photo'/>";
                form=document.getElementById("form_add_photo");
                form.innerHTML+="<center><table id='table_add_photo'></table>";
                table=document.getElementById("table_add_photo");
                table.innerHTML+="<tr><td>Nom de l'album :</td><td><select id='nom_album'></select><a href='#' onclick='add_album();'><img src='../images/add.png' border='0'></a></td></tr>";
                table.innerHTML+="<tr><td>Images : </td><td><input type='file' id='file_photo_1' onchange='add_champ(1);'></td></tr>";
                form.innerHTML+="<center><input type='submit' id='submit_add_photo' onclick='check_add_photo();'></center>";
                corps.innerHTML+="<center><span id='erreur'></span></center>";
                liste_albums();
            }

            function add_champ(num){
                if(num==nb_champs){ //Je ne veux rajouter un champ que si c'est le dernier que l'on rempli !
                    nb_champs++;
                    table=document.getElementById("table_add_photo");
                    champ=document.getElementById("file_photo_"+nb_champs);
                    table.innerHTML+="<tr><td></td><td><input type='file' id='photo_"+nb_champs+"' onchange='add_champ("+nb_champs+");'></td></tr>";
                    
                }
            }

(la fonction liste_albums est juste une requête pour avoir le nom des albums)

Pourrait-on voir le code HTML généré complet de la page, pour pouvoir tester, stp ?

<div id="corps">
<center>Ajouter une Photo</center><br>
<center>
<form method="post" action="add.php" onsubmit="" id="form_add_photo">
<center>
<table id="table_add_photo">
<tbody>
<tr><td>Nom de l'album :</td><td><select id="nom_album"><option value="Concert du 09/06">Concert du 09/06</option></select><a href="#" onclick="add_album();"><img src="../images/add.png" border="0"></a></td></tr>
</tbody>
<tbody>
<tr><td>Images : </td><td><input id="file_photo_1" onchange="add_champ(1);" type="file"></td></tr>
</tbody>
</table></center>
<center>
<input id="submit_add_photo" onclick="check_add_photo();" type="submit"></center></form></center>
<center><span id="erreur"></span></center></div>

Voilà

C'est dû à innerHTML le problème.

machin.innerHTML += "qqch";
c'est équivalent à
machin.innerHTML = machin.innerHTML + "qqch";

Donc en quelque sorte, ça "réinitialise" le code... en y ajoutant autre chose.


Bref, pour ajouter proprement, il faut utiliser les méthodes du DOM.

Voilà le code, j'ai commenté :

function add_champ(num){
  if(num==nb_champs){ //Je ne veux rajouter un champ que si c'est le dernier que l'on rempli !
    nb_champs++;
    var table=document.getElementById("table_add_photo"); // On récupère le <table>
    var nouveau_tbody = document.createElement("tbody"); // on crée un nouveau <tbody>
    var nouveau_tr = document.createElement("tr"); // un nouveau <tr>
    var nouveau_td1 = document.createElement("td"); // un premier <td>
    var nouveau_td2 = document.createElement("td"); // et un deuxième <td>
    var nouveau_champ = document.createElement("input"); // un champ <input> qu'on paramètre :
    nouveau_champ.id="file_photo_"+nb_champs; // On lui met un id file_photo_x
    nouveau_champ.type="file"; // On indique le type "file"
    nouveau_champ.onchange=function() { // Et enfin on attribue une fonction à l'événement onchange :
      add_champ(nb_champs); // la fonction add_champ()
    };
					
    nouveau_td2.appendChild(nouveau_champ); // On insère l'<input> dans le deuxième <td>
    nouveau_tr.appendChild(nouveau_td1); // le premier <td> dans le <tr>
    nouveau_tr.appendChild(nouveau_td2); // suivi du deuxième <td> toujours dans le <tr>
    nouveau_tbody.appendChild(nouveau_tr); // On insère le <tr> dans le <tbody>
    table.appendChild(nouveau_tbody); // et le <tbody> dans le <table> ! 
  }
}

(Il faudra peut-être faire la même chose avec l'autre fonction, je n'ai pas réellement regardé à quoi elle servait).

Merci beaucoup !
En effet, je rajoute toujours tout en malpropre