Envoi d'un champ créé en JavaScript

Version imprimable

30/03/2009, 14h13
agnaou

Envoi d'un champ créé en JavaScript

bonjour et tous et bon debut de semaine
aprés plusieurs essai je décidé de vous posté mon pro :
j'ai formulaire qui contient plusieurs champ dont un est lié a un button ajouter qui contient a sont evénement onclick une function js qui permet de crée un champ de type file
sans ce champ la (type file de js )tous est normal
mais lorsque je clique sur ce boutton (ajouter le champ file) et je valide le champ file ne transmet pas (les autre champ ok)
et merci d'avance pour vous reponses
30/03/2009, 14h21
Thes32

salut,

l'attribut name de ton nouveau champ file doit être incorrect. Peux montre ce qui est crée par Javascript après le onclick ?

Note bien : relis toi deux fois avant de poster

tous d'abord merci pour ta reponse rapide
et voilz mon script:

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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
<!--ce script pour définier-->
<script language="javascript" type="text/javascript">
//instantiation l'objet XMLHttpRequest sous firfox et IE
function ajax(){
 
	if(window.XMLHttpRequest) // Firefox et autres
	xhr_object = new XMLHttpRequest();
 
	else if(window.ActiveXObject){ // Internet Explorer
		try {
			xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
 
		} catch (e) {
			try {
				xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 
			} catch (e1) {
				xhr_object = null;
			}
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		return ;
	}
	return xhr_object;
}
 
function CreerForm(element)
     {
 
     if(element != '')
     {
 
               file('Script.php?element='+escape(element));
     }
	 else{
		return false;
	       }
}
 
function files(fichier)
     {
     if(window.XMLHttpRequest) // FIREFOX
         { xhr_object = new XMLHttpRequest();}
     else if(window.ActiveXObject) // IE
          { xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); }
     else
          { return(false); }
     xhr_object.open("GET", fichier, false);
     xhr_object.send(null);
     if(xhr_object.readyState == 4) { 
		//placera le form généré dans la div voulu
document.getElementById(madiv).innerHTML=xhr_object.responseText;; }
     else 
		{ return(false); }
     }
</script>
<script type="text/javascript">
          var compteur = 0;
         function ajouter(){
            // On récupère le fieldset
            var conteneur   = document.getElementById('fichiers');
            /**
            * Création des éléments dont on a besoin :
            * Un div dans lequel on mettra notre champ file et une case à cocher
            * qui nous servira à enlever ensuite le div.
            *
            * En utilisant un div ça sera plus facile car sinon
            * on aurais du enlever le champ file et la case à cocher séparément.
            */
            var undiv      = document.createElement('div');
            var fich      = document.createElement('input');
            var check      = document.createElement('input');
 
            fich.name   = 'newimage';
            fich.type   = 'file';
 
            check.type   = 'checkbox';
 
            // On enlève sur le click de la checkbox
            check.onclick = function(){
               // Elément à enlever
               lediv      = this.parentNode;
               // Elément auquel on enlève
               lefieldset   = lediv.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv);
            }
 
            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On utilise aussi createTextNode pour ajouter du texte apres la case
            */
            undiv.appendChild(fich);
            undiv.appendChild(check);
            undiv.appendChild(document.createTextNode("Enlever"));
 
            // Ajout du div :
            conteneur.appendChild(undiv);
         }
      </script>

et pour le button

Code:

<input type="button" value="OK" onclick="ajouter()">

sachant que ce button est indépandent du button de validation de formulaire
et merci d'avance

30/03/2009, 14h47
Thes32

si je comprends quand tu cliques sur le bouton OK tu as :

Code:

<input type="file" name="newimage" />

vérifie que c'est bien ça dans ton code html généré après le click.
30/03/2009, 15h23
agnaou

[QUOTE=thes32;4158099]si je comprends quand tu cliques sur le bouton OK tu as :

Code:

<input type="file" name="newimage" />

QUOTE]
merci pour ta reponse :oui c est ça
mais aprés le click le code géré ne contient pas ca
et merci encore une fois pour vous reponse
30/03/2009, 15h27
Thes32

Peux tu poster le code source html qui est généré après ton click ?

désole mais ce qui nous concerne aprés clic est ça:

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
<body background="images\bg15.gif">
                      <form method="POST" action="valider_modife_hotel.php? nom=farah" name="F1"  enctype="multipart/form-data" >
<table align="right" border="0">
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Categorie Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="categorie" value="lux"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Ville Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="ville" value="casablanca"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Adresse Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="adresse" value="sidi moment"/></td>
</tr>
<tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">Telephone Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="telephone" value="0665491064"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Fax Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="fax" value="0665491064"/></td>
</tr><tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">image Hotel situé au </span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="image_h" value="E:/Agence de voyage/images/  Farah.jpg"  disabled="disabled" /></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Nouvelle image Hotel</span></td>
<td>
         <fieldset id="fichiers"><input type="button" value="OK" onclick="ajouter()" style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;"/></fieldset></td>
<td></td>
</tr>
<tr>
<td align="right" width="30%"><font color="#003498" face="Verdana"><span style="font-size:8pt;">&nbsp;</span></font></td>
<td><span style="font-family:Arial; font-size:8pt; color:rgb(51,51,102);"><font color="#003498" face="Verdana"><INPUT TYPE="submit" name="valider"  VALUE="Valider"  style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;" name="submit">&nbsp;&nbsp;</td>
</tr>
</table>
</form>
 
</body>

et merci

30/03/2009, 15h57
Thes32

je crois que tu dois revoir ton code Javascript, je vois pas le champ input file ajouté dans ton formulaire.
30/03/2009, 16h19
agnaou

j'ai fait une petit vérification a mon code js je le trouve normal
svp si vous des remrques sur mon script qui peut me aide ou plus tot une solution efficace n'hésitez pas de me les données et merci encore une fois

pourquoi ne pas simplement faire un innerHTML ?
au clique sur ton bouton ajouter, tu mets un code du style :

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
<body background="images\bg15.gif">
                      <form method="POST" action="valider_modife_hotel.php? nom=farah" name="F1"  enctype="multipart/form-data" >
<table align="right" border="0">
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Categorie Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="categorie" value="lux"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Ville Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="ville" value="casablanca"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Adresse Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="adresse" value="sidi moment"/></td>
</tr>
<tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">Telephone Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="telephone" value="0665491064"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Fax Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="fax" value="0665491064"/></td>
</tr><tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">image Hotel situé au </span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="image_h" value="E:/Agence de voyage/images/  Farah.jpg"  disabled="disabled" /></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Nouvelle image Hotel</span></td>
<td>
         <fieldset id="fichiers"><input type="button" value="OK" onclick="document.getElementById('unNom').innerHTML=\"<input type='file' name='nom' />\"" style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;"/></fieldset></td>
<td></td>
</tr>
<tr><td id='unNom'></td></tr>
<tr>
<td align="right" width="30%"><font color="#003498" face="Verdana"><span style="font-size:8pt;">&nbsp;</span></font></td>
<td><span style="font-family:Arial; font-size:8pt; color:rgb(51,51,102);"><font color="#003498" face="Verdana"><INPUT TYPE="submit" name="valider"  VALUE="Valider"  style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;" name="submit">&nbsp;&nbsp;</td>
</tr>
</table>
</form>
 
</body>

ou sinon tu mets directement ton champ "file" dans ton formulaire sauf que tu fais ça :

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
<body background="images\bg15.gif">
                      <form method="POST" action="valider_modife_hotel.php? nom=farah" name="F1"  enctype="multipart/form-data" >
<table align="right" border="0">
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Categorie Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="categorie" value="lux"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Ville Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="ville" value="casablanca"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Adresse Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="adresse" value="sidi moment"/></td>
</tr>
<tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">Telephone Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="telephone" value="0665491064"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Fax Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="fax" value="0665491064"/></td>
</tr><tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">image Hotel situé au </span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="image_h" value="E:/Agence de voyage/images/  Farah.jpg"  disabled="disabled" /></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Nouvelle image Hotel</span></td>
<td>
         <fieldset id="fichiers"><input type="button" value="OK" onclick="getElementsById('nom').type='file'" style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;"/></fieldset></td>
<td></td>
</tr>
<tr><td><input type="hidden" name="nom" id="nom"/></td></tr>
<tr>
<td align="right" width="30%"><font color="#003498" face="Verdana"><span style="font-size:8pt;">&nbsp;</span></font></td>
<td><span style="font-family:Arial; font-size:8pt; color:rgb(51,51,102);"><font color="#003498" face="Verdana"><INPUT TYPE="submit" name="valider"  VALUE="Valider"  style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;" name="submit">&nbsp;&nbsp;</td>
</tr>
</table>
</form>
 
</body>

si tu veux garder l'idée de pouvoir en mettre plusieurs :

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
<body background="images\bg15.gif">
                      <form method="POST" action="valider_modife_hotel.php? nom=farah" name="F1"  enctype="multipart/form-data" >
<table align="right" border="0">
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Categorie Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="categorie" value="lux"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Ville Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="ville" value="casablanca"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Adresse Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="adresse" value="sidi moment"/></td>
</tr>
<tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">Telephone Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="telephone" value="0665491064"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Fax Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="fax" value="0665491064"/></td>
</tr><tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">image Hotel situé au </span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="image_h" value="E:/Agence de voyage/images/  Farah.jpg"  disabled="disabled" /></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Nouvelle image Hotel</span></td>
<td>
<input id="compteur" type="hidden" value="" />
         <fieldset id="fichiers"><input type="button" value="OK" onclick="var i=document.getElementById('compteur').value;i++;document.getElementById('unNom').innerHTML=document.getElementById(unNom).value+\"<td><input type='file' name='nom'+i; /></td>\";document.getElementById('compteur').value=i;" style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;"/></fieldset></td>
<td></td>
</tr>
<tr id='unNom'></tr>
<tr>
<td align="right" width="30%"><font color="#003498" face="Verdana"><span style="font-size:8pt;">&nbsp;</span></font></td>
<td><span style="font-family:Arial; font-size:8pt; color:rgb(51,51,102);"><font color="#003498" face="Verdana"><INPUT TYPE="submit" name="valider"  VALUE="Valider"  style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;" name="submit">&nbsp;&nbsp;</td>
</tr>
</table>
</form>
 
</body>

ça me parait plus simple que ce que tu as fait mais peut-être me trompe-je et ce n'est pas faisable, à vérifier

01/04/2009, 08h45
darkstar123456

en fait c'est bien ce qu'il me semblait : ton code est +/- correct.
J'ai testé chez moi : ça marche

Par contre, comme il me semblait c'est un peu illogique ce que tu fais vu que tous tes champs type="file" ont le même name ==> tu risques pas d'envoyer plusieurs images...

Je vois en plus que t'as un compteur que tu n'incrémente pas, ca serait pourtant la solution...
01/04/2009, 13h12
agnaou

ok merci beaucoup pour ta remarque pour le compteur c vraiment le cas
mais mon pro cher moi c 'est que je n'arrive pas a a postez mon image
et meme lorsque je regard mon source html je vois l'absence de ce champ la
et merci d'avance

si tu ne vois pas ton champ dans ton code source c'est normal c'est parce que c'est le dom qui est modifié et donc firefox ne récupère par le nouveau dom quand tu affiches la sources
essayes de travailler avec WebDevelopper Toolbar ou FireBug qui sont des extensions de firefox et qui affichents toutes les deux les modifications du dom et même les erreurs qui existent (sur la webdev, faut faire "voir source" -> "source réellement générée" pour faire apparaître le code généré)

d'autre part, j'ai un peu modifié mon code (qui ne fonctionnait pas ^^) et ça fonctionne maintenant :

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
<script language="javascript" type="text/javascript">
	function ajout(nombre){
		var i=document.getElementById('compteur').value;
		i++;
		document.getElementById('unNom').innerHTML=document.getElementById('unNom').innerHTML+"<td>nom"+i+" <input type='file' name='nom"+i+"' /></td>";
		document.getElementById('compteur').value=i;
	}
</script>
<body background="images\bg15.gif">
                      <form method="POST" action="valider_modife_hotel.php? nom=farah" name="F1"  enctype="multipart/form-data" >
<table align="right" border="0">
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Categorie Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="categorie" value="lux"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Ville Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="ville" value="casablanca"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Adresse Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="adresse" value="sidi moment"/></td>
</tr>
<tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">Telephone Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="telephone" value="0665491064"/></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Fax Hotel</span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="fax" value="0665491064"/></td>
</tr><tr><td><font face="Verdana" color="blue"><span style="font-size:9pt;">image Hotel situé au </span></font></td>
<td><span style="font-size:9pt;"><font face="Verdana" color="white"><input type="text" name="image_h" value="E:/Agence de voyage/images/  Farah.jpg"  disabled="disabled" /></td>
</tr>
<tr>
<td><font face="Verdana" color="blue"><span style="font-size:9pt;">Nouvelle image Hotel</span></td>
<td>
<input id="compteur" type="hidden" value=0 />
         <fieldset id="fichiers"><input type="button" value="OK" onclick="ajout(document.getElementById('compteur'))" style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;"/></fieldset></td>
<td></td>
</tr>
<tr id='unNom'></tr>
<tr>
<td align="right" width="30%"><font color="#003498" face="Verdana"><span style="font-size:8pt;">&nbsp;</span></font></td>
<td><span style="font-family:Arial; font-size:8pt; color:rgb(51,51,102);"><font color="#003498" face="Verdana"><INPUT TYPE="submit" name="valider"  VALUE="Valider"  style="font-family:Verdana,serif; font-style:normal; font-weight:normal; font-size:12px; color:black; background-color:rgb(255,153,0); margin:1px; padding:1px; border-width:1px; border-color:black; border-style:groove;" name="submit">&nbsp;&nbsp;</td>
</tr>
</table>
</form>
 
</body>

avec ça tu as un input qui s'ajoute à chaque clique (par contre ça s'affiche sur la même ligne) et chez moi l'upload fonctionne bien :/

01/04/2009, 14h04
darkstar123456

Tu ne verras normalement pas ton input dans la source vu qu'il est créé dynamiquement. Le seul moyen est de regarder par Firebug par exemple.

Pour ce qui est du fichier, y'a qu'en mettant des champs "name" différents (et donc l'utilisation du compteur) que ça pourra marcher.
01/04/2009, 15h56
agnaou

merci pour vous reponse tous les deux mais mon pro resste le meme:pas d'upload et pour maiou le chat thon je teste votre scripte en total mais rien ne s'affiche meme le champ pour upload image
je utilise ie7 et je ponse que js est désactivé tu peut me dire comment l'activé svp et merci d'avance
01/04/2009, 16h04
Miaou le chat thon

activation js sur ie7
il te parle même d'une toolbar pour le dév web tu devrais regarder
mais pourquoi ne pas développer avec firefox ?
ensuite, js bloqué ou pas, je pense que la page devrait s'afficher quand même étant donné qu'une seul champ utilise du javascript
en tout cas, chez moi, sous firefox, tout fonctionne très bien

pour le traitement de l'upload, tu pourrais nous montrer le script ?