Ajout dynamique d'input dans un formulaire
Bonjour, à tous
Voila je sollicite votre aide pour un problème qui me laisse perplexe depuis 2 jours..
Je suis en train de coder un système de multi-upload d'image (qui marche). Le truc c'est que je dois associer à chaque nouvelle image 2 boutons radios qui correspondent au choix d'alignement de l'image en question (droite ou gauche).
Le problème vient du fait que l'ajout des inputs se fait dynamiquement et je n'arrive pas à récupérer la valeur des boutons radios associés à chaque input.
Je m'explique..
Voici le formulaire de mutliupload :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="upload">
<form name="uploadImg" action="upload.php" method="post" enctype="multipart/form-data">
<div id="fichiers">
Aucun fichier à uploader
</div>
<br/>
<input type="hidden" value="'. $lien .'" name="nomChantier"/>
Charger l\'image :
<!-- CE SPAN RECOIT LES DIFFERENTS INPUTS CREES PUIS CACHES UNE FOIS UTILISES -->
<span id="input"></span>
<br/><br />
<input type="submit" value="Uploader"/>
</form>
</div> |
A chaque fois que l'on rajoute un fichier à uploader, on passe l'input dans le span et on le rend invisible
On rajoute une entrée avec un lien de supression, le nom de l'image et les fameux boutons radio dans la div "fichier"
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| function ajouterFichier(input)
{
if(nbrFichiers == 0)
$("fichiers").removeChild($("fichiers").firstChild);
//Création de la ligne dans la liste des fichiers à uploader
var fichier = document.createElement("p");
//Image de suppression
var image = document.createElement("img");
image.src = "images/suppr.gif";
image.alt = "supprimer";
Element.setStyle(image, {border: "0px", verticalAlign: "top"});
//Lien pour supprimer
var lnk = document.createElement("a");
lnk.href= "#";
lnk.onclick = function () {
supprimerFichier(fichier, input);
}
//Ajout de l'image dans la balise de lien
lnk.appendChild(image);
//Ajout des boutons radios
var radioAv = document.createElement("input");
radioAv.type = "radio";
radioAv.name = "_" + getFileName(input.value);
radioAv.value = "Av";
var radioAp = document.createElement("input");
radioAp.type = "radio";
radioAp.name = "_" + getFileName(input.value);
radioAp.value = "Ap";
//Ajout du lien à la ligne de la liste
fichier.appendChild(lnk);
//Ajout du nom du fichier
fichier.appendChild(document.createTextNode(" " + getFileName(input.value) + " "));
Element.setStyle(fichier, {margin: "0", padding: "0"});
//Ajout des boutons radios à la ligne
fichier.appendChild(radioAv);
fichier.appendChild(document.createTextNode("Av"));
fichier.appendChild(radioAp);
fichier.appendChild(document.createTextNode("Ap"));
//Ajout de l'item à la liste
$("fichiers").appendChild(fichier);
nbrFichiers++;
//Affectation de l'attribut name de l'input
input.name = getFileName(input.value);
new Effect.Highlight(fichier, {startcolor: "#7fd9ff", endcolor: "#FFFFFF"});
//Création d'un nouvel input pour un nouveau fichier
Element.hide(input);
creerInput();
} |
Le problème vient du fait que étant créer dynamiquement mes boutons radios il ne sont pas pris en compte lors de l'envoie du formulaire
Ainsi dans mon fichier php qui upload les images
lorsque j'essai de récuperer la valeur des radios il ne trouve rien
$align = "_".$_POST[$name_file];
Une idée :) ??
Merci d'avance
