Ajout dynamique d'input dans un formulaire

**Nappo** · 22/12/2009, 21h30

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** · 23/12/2009, 12h45

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** · 23/12/2009, 14h02

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/

**emmanuel.remy** · 23/12/2009, 14h04

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

ERE

**Nappo** · 23/12/2009, 14h27

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** · 23/12/2009, 14h41

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** · 23/12/2009, 16h02

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** · 23/12/2009, 17h11

@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

**Nappo** · 23/12/2009, 19h16

J'ai essayer d'utiliser le script que tu donnes dans ton premier lien malheureusement je n'arrive pas a afficher mes boutons radios..

j'ai rajouter un paramètre à ta fonction $Close pour me permettre de créer les éléments dans ma balise <p> ce qui facilite la suppression de la ligne
Je vois pas ce qui passe pas

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
 
 
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.style.cursor="pointer";
    image.alt = "supprimer";
    Element.setStyle(image, {border: "0px", verticalAlign: "top"});
 
 
    //Lien pour supprimer
    var lnk = document.createElement("a");
    lnk.onclick = function () {
        supprimerFichier(fichier, input);
    }
    //Ajout de l'image dans la balise de lien
    lnk.appendChild(image);
 
    //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"});
 
 
	var radioAv = $C({'obj':'input','type':'radio' 'name':'_'+getFileName(input.value),'value':'Av','checked':'true' });
	$Close(radioAv,fichier);
	fichier.appendChild(document.createTextNode("Av"));
	var radioAp = $C({'obj':'input','type':'radio' 'name':'_'+getFileName(input.value),'value':'Ap' });
	$Close(radioAp,fichier);
	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();
}

fonction $Close

Code :

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

1
2
3
4
5
 
for(l=0;AppendLot[0];l++){
                        Closing.appendChild(AppendLot.shift())
                            }
       if(Flux.length==1){$(fichier).appendChild(Flux.pop())}

up : Le code marche (erreur de ma part) mais tjr le même problème je n'ai pas accès au cahmps dans mon script de traitement PHP

**SpaceFrog** · 23/12/2009, 19h32

Code :

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

  input.name = getFileName(input.value);

no comment ...

**Nappo** · 23/12/2009, 21h04

Code :

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

1
2
 
input.name = getFileName(input.value);

no comment ...

Je vois pas ><
Cette ligne affecte le name de l'ancien input pour pouvoir être récupérer après, sa marche très bien étant donné que j'arrive à récupérer les images

**SpaceFrog** · 24/12/2009, 09h30

Avec IE on ne peut pas attribuer ni modifier le name dynamiquement ...

**kernelfailure** · 24/12/2009, 11h05

Sauf si on passe par DOM.

**SpaceFrog** · 24/12/2009, 12h51

ce n'est pas ce que semble dire msdn

même avec le dom il faut faire un createElement particulier de la balise complète

Code :

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

document.createElement('<input name="nom">')

en y incluant le name

**Nappo** · 24/12/2009, 15h02

ouai mais cette notation ne passe pas sous FF ..

**kernelfailure** · 24/12/2009, 15h38

http://www.developpez.net/forums/d79...t/#post4596932

L'astuce est ici et fonctionne aussi sous IE6 :

Code :

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

1
2
3
4
5
6
7
 
...
var sel = document.createElement('select');
sel.setAttributeNode(document.createAttribute('Name')); // name avec un N !!! (IE hack) 
...
sel.setAttribute('name','liquidCafe');
...

**Nappo** · 25/12/2009, 19h06

Sa marche enfin !!!
j'ai utilisé la solution proposer par kernelfailure et c'est passé comme une lettre à la poste

Merci a tous pour votre aide !

**SpaceFrog** · 25/12/2009, 22h22

Code :

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

var sel = document.createElement('<select name="liquidCafe'''>);

fonctionne aussi à priori ..

**kernelfailure** · 26/12/2009, 02h09

Envoyé par SpaceFrog

Code :

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

var sel = document.createElement('<select name="liquidCafe">');

fonctionne aussi à priori ..

Pas sous FF. D'ailleurs, c'est spécifique à IE.

**SpaceFrog** · 26/12/2009, 09h55

Code :

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

1
2
3
4
5
6
7
if (document.all){
  var sel =(document.createElement('<select name="liquidCafe">');
}
else{
    var sel =document.createElement('select');
    sel.name="liquidCafe"
}

Ajout dynamique d'input dans un formulaire

JavaScript

Discussions similaires

Partager

Partager