Bonjour
Dans un formulaire qui me sert à ajouter des produits, je souhaiterais que l'utilisateur puisse ajouter un nombre indéfini d'images liées au produit. A chaque fois qu'il sélectionne une image dans un champs <input type="file" />, si le champs est le dernier de la liste, un nouveau s'ajoute en dessous.
<tr>
<td colspan="3" id="images">
<input type="hidden" id="nbImages" name="nbImages" value="1" />
Ajouter des images du produit : <br />
<input type="file" id="img1" name="img1" onchange="javascript:aj_champs (this);" />
</td>
</tr>
nbImages permet de savoir combien de champs sont affichés.
La fonction appelée par le onchange est la suivante :
function aj_champs (ch) {
var num = document.getElementById ('nbImages');
if (ch.value != "") { //Si le champs n'est pas vide
if (ch.id == ("img" + num.value)) { // Si c'est le dernier champs
num.value++;
document.getElementById ("images").innerHTML += '<br /><input type="file" id="img' + num.value.toString () + '" name="img' + num.value.toString () + '" onchange="javascript:aj_champs (this);" />';
}
}
}
Si on change le fichier sélectionné dans un champs qui n'est pas le dernier, aucun soucis.
Par contre, si c'est le dernier, un nouveau champs apparait bien en dessous, mais le champs qui appelle le onchange perd sa valeur.
Quelqu'un aurait une idée?
Merci d'avance