Discussion :

[Nappo]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[emmanuel.remy]

Salut et bienvenue sur les forums de dvp.com,

Je pense que ton souci vient du fait qu'aucun bouton radio n'est actif (coché). Si c'est le cas le navigateur ne transmet pas le champ. Tu peux essayer en cochant un des boutons et observer le résultat.
Enfin tu peux utiliser un outil comme firebug ou la console de Google Chrome pour voir les entêtes de la requête post.

ERE

[SpaceFrog]

Pour moi le problème proviendrait majoritairement du fait de l'attribution dynamique du name ...
cf ce thread http://www.developpez.net/forums/d53...ynamique-form/

[Nappo]

Salut et merci d'avoir pris le temps de me lire

Après avoir vérifié avec FireBug mes craintes se sont confirmées.. En fait les champs ne sont pas pris en compte comme faisant parti du formulaire, ils ne sont pas présents dans les entêtes POST lors du passage du formulaire.. Du coup je vais mater le topic que tu m'a filé en espérant y trouver mon bonheur

[emmanuel.remy]

Re,

As tu essayé en cochant un des radios ?
Parce que pour tout te dire, j'ai pris ton code, fais un essai avec FF 3.5 et cela fonctionne. Mais là dessus je rejoins Spacefrog et c'est peut-être aussiun souci de création selon la version du navigateur

Ci-dessous ton code mis en forme (de façon très sale, mais fonctionnel) utilisé pour reproduire ton souci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
 
function $(id) {
  return document.getElementById(id);
}
 
function ajouterFichier(input)
{
 
$("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";
 
//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 = "_" + "TOTO.TXT";
radioAv.value = "Av";
 
var radioAp = document.createElement("input");
radioAp.type = "radio";
radioAp.name = "_" + "TOTO.TXT";
radioAp.value = "Ap";
 
//Ajout du lien à la ligne de la liste
fichier.appendChild(lnk);
 
 
//Ajout du nom du fichier
fichier.appendChild(document.createTextNode(" TOTO.TXT "));
 
//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 = input.value;
 
 
}  
  </script>
 
  </head>
  <body>
<div id="upload">
<form name="uploadImg" action="/" method="post">
<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/>
<input type=button onclick="ajouterFichier(this);" value="fichier" />
<br />
<input type="submit" value="Uploader"/>
</form>
</div>
  </body>
</html>

ERE

[SpaceFrog]

autre source d'inspiration:
http://www.developpez.net/forums/d81...pload+multiple
là les inputs de base existent déja ils sont ensuite clonés ...

[Nappo]

@emmanuel.remy : ouai tkt j'ai testé en sélectionnant une valeur

Le truc c'est que ce code je l'ai ripper en parti je sais plus trop ou. Et même si je l'ai bien compris y'a des trucs qui m'échappent.
En plus je suis pas vraiment un spécialiste du JS (je suis plutôt prog logicielle) donc j'apprends pas mal de truc en codant.

Je suis sur une piste là, je vais faire quelques tests et je vous tiens au courant

Merci de votre aide en tout cas

[emmanuel.remy]

@Nappo: avec tout ça si tu ne trouves pas ton bonheur !

ERE