Récupération d'une valeur de formulaire & Javascript

Bonjour,

l'énoncé du probleme est assez simple:

j'ai une page avec un formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
echo '<form method="get" action="javascript:showPopWin(\'ed-caddie.php?ajouter=1&imgID='.$title.'\', 600, 500, null);">';
      echo '<tr>';
        echo '<th align="center" valign="middle" width="100%" scope="col">Quantit&eacute;</th>';
        echo '<th align="center" valign="middle" width="67" scope="col">Prix</td>';
        echo '<th></th>';
      echo '</tr>';
      echo '<tr>';
        echo '<td align="center"><input type="hidden" name="ajouter" value="1"><input type="hidden" name="imgID" value="'.$title.'">';
        echo '<select name="qte" style="width: 40px">';
        echo '<option value="1" selected>1</option>';
        echo '<option value="2">2</option>';
        echo '<option value="3">3</option>';
        echo '<option value="4">4</option>';
        echo '<option value="5">5</option>';
        echo '<option value="6">6</option>';
        echo '<option value="7">7</option>';
        echo '<option value="8">8</option>';
        echo '<option value="9">9</option>';
        echo '</select>';
      echo '</td>';
      echo '<td height="30" align="center">'.$vendre['prix'].'&euro;</td>';
      echo '<td>';
    echo '<input type="submit" value="Ajouter"></form>';

Le javascript que j'utilise affiche une sorte de popup dhtml avec l'url que je lui passe.
Dans mon fichier ed-caddie.php, je veut récupérer les différentes variables : ajouter = 1, imgID = nom_de_l'image et la quantité qui se trouve etre une select box de mon formulaire.
Cependant, quand j'essaye de l'utiliser dans mon fichier ed-caddie.php (en l'ayant récupéré avec un $_GET['qte'] assez simple), j'ai une erreur comme quoi l'index n'est pas défini.
Il est à noter que sans l'usage de cette fonction (showPopWin) je récupere toutes mes données, et ça marche.

L'un d'entre vous aurait-il une solution à me proposer ?
Ci-dessous le .js qui affiche la fenetre en surimpression :

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
104
105
106
107
108
109
110
111
112
// Popup code
var gPopupMask = null;
var gPopupContainer = null;
var gPopFrame = null;
var gReturnFunc;
var gPopupIsShown = false;
var gHideSelects = false;
var gLoading = "loading.html";
 
var gTabIndexes = new Array();
// Pre-defined list of tags we want to disable/enable tabbing into
var gTabbableTags = new Array("A","BUTTON","TEXTAREA","INPUT","IFRAME");	
 
// If using Mozilla or Firefox, use Tab-key trap.
if (!document.all) {
	document.onkeypress = keyDownHandler;
}
 
/**
 * Override the loading page from loading.html to something else
 */
function setPopUpLoadingPage(loading) {
	gLoading = loading;
}
 
/**
 * Initializes popup code on load.	
 */
function initPopUp() {
	// Add the HTML to the body
	var body = document.getElementsByTagName('body')[0];
	var popmask = document.createElement('div');
	popmask.id = 'popupMask';
	var popcont = document.createElement('div');
	popcont.id = 'popupContainer';
	popcont.innerHTML = '' +
		'<div id="popupInner">' +
			'<div id="popupTitleBar">' +
				'<div id="popupTitle"></div>' +
				'<div id="popupControls">' +
					'<a onclick="hidePopWin(false);"><span>Close</span></a>' +
				'</div>' +
			'</div>' +
			'<iframe src="'+gLoading+'" style="width:100%;height:100%;background-color:transparent;" scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="100%" height="100%"></iframe>' +
		'</div>';
	body.appendChild(popmask);
	body.appendChild(popcont);
 
	gPopupMask = document.getElementById("popupMask");
	gPopupContainer = document.getElementById("popupContainer");
	gPopFrame = document.getElementById("popupFrame");	
 
	// check to see if this is IE version 6 or lower. hide select boxes if so
	// maybe they'll fix this in version 7?
	var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
	if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
		gHideSelects = true;
	}
 
	// Add onclick handlers to 'a' elements of class submodal or submodal-width-height
	var elms = document.getElementsByTagName('a');
	for (i = 0; i < elms.length; i++) {
		if (elms[i].className.indexOf("submodal") >= 0) { 
			elms[i].onclick = function(){
				// default width and height
				var width = 400;
				var height = 200;
				// Parse out optional width and height from className
				var startIndex = this.className.indexOf("submodal");
				var endIndex = this.className.indexOf(" ", startIndex);
				if (endIndex < 0) {
					endIndex = this.className.length;
				}
				var clazz = this.className.substring(startIndex, endIndex);
				params = clazz.split('-');
				if (params.length == 3) {
					width = parseInt(params[1]);
					height = parseInt(params[2]);
				}
				showPopWin(this.href,width,height,null); return false;
			}
		}
	}
}
addEvent(window, "load", initPopUp);
 
 /**
	* @argument width - int in pixels
	* @argument height - int in pixels
	* @argument url - url to display
	* @argument returnFunc - function to call when returning true from the window.
	*/
 
function showPopWin(url, width, height, returnFunc) {
	gPopupIsShown = true;
	disableTabIndexes();
	gPopupMask.style.display = "block";
	gPopupContainer.style.display = "block";
	centerPopWin(width, height);
	var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10);
	gPopupContainer.style.width = width + "px";
	gPopupContainer.style.height = (height+titleBarHeight) + "px";
	gPopFrame.style.width = parseInt(document.getElementById("popupTitleBar").offsetWidth, 10) + "px";
	gPopFrame.style.height = (height) + "px";
	gPopFrame.src = url;
	gReturnFunc = returnFunc;
	// for IE
	if (gHideSelects == true) {
		hideSelectBoxes();
	}
	window.setTimeout("setPopTitleAndRewriteTargets();", 100);
}

(si ce n'est pas trop demander, c'est assez urgent...)

Merci d'avance pour votre aide

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function pop(formulaire,url){
quantite=formulaire.qte.options[formulaire.qte.selectedIndex].value;
 
showPopWin(url+"&qte="quantite, 600, 500, null);
 
return false;
}
...
</script>
 
 
echo '<form method="get" onsubmit="return pop(this,\'ed-caddie.php?ajouter=1&imgID='.$title.'\')">';

Hm j'ai déjà essayé un truc dans ce style, seulement, ça me fait une erreur.

Par contre, j'ai résolu mon problème en faisant

Code:

1
2
3
 
 
<form method="get" action="javascript:var qte=document.getElementById('qte').value;showPopWin('ed-caddie.php?ajouter=1&imgID=<?php echo $title ?>&qte='+qte, 800, 400, null);">

Mais maintenant, j'ai un autre soucis:

dans l'iframe qui load cette page, j'ai un div qui est caché. Lorsque l'on appuie sur un lien, il montre le div (pour cela, je réappelle la fonction showPopWin, et je lui passe en argument une fonction javascript qui affiche mon div. C'est un pau sale, mais j'ai pas réussi à faire autrement).
Par contre, là où j'ai un probleme, c'est lors du submit du formulaire.

Ce que je voudrais, c'est qu'il m'affiche dans l'iframe la meme page (ed-caddie.php) ce que j'arrive à faire, seulement, je perd les données de mon formulaire...

Pour une meilleure compréhension, voilà le code :

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
 
 
<?php
require_once ( './wp-content/plugins/ed-caddie/ed-connexion.php' );      // connexion à la base de données
session_start();                                                        // lancement de la session
 
 
/***************************************
 Cette partie récupere les parametres
 passées par l'url pour effectuer
 le traitement souhaité.
****************************************/
 
 
if (isset($_GET['ajouter']))       // test pour verifier la présence du parametre ajouter
{
  if ($_GET['ajouter'] == 1) // ajout d'un article
  {
  $id_img = $_GET['imgID']; // on recupere le nom de l'image
  $qte = $_GET['qte']; // on recupere la quantité
  if (isset($_SESSION['caddie'][$id_img])) // si on a déjà ajouté l'image au caddie
    {
     $_SESSION['caddie'][$id_img]['qte']+=$qte;   // on rajoute la quantité choisie
    }
  else                                // sinon on ajoute la produit et sa quantité
    {
     $sql = "SELECT prix FROM wp_images WHERE nom LIKE '%$id_img'";    // recupere le prix de la photo
     $result = mysql_query($sql);
     $prix = mysql_fetch_assoc($result);
 
     $_SESSION['caddie'][$id_img] = array( "qte" => $qte, "prix" => $prix["prix"]) ;
    }
  }
  
if ($_GET['ajouter'] == -1)  // suppression d'un article
  {
    $id_img = $_GET['imgID'];
    unset($_SESSION['caddie'][$id_img]);
  }
 
if ($_GET['ajouter']  == -2)   // terminer la commande, au moment de la validation du formulaire (nom, prenom, ...)
  {
   $_SESSION['commande'] = 1;    // modification de la variable de session pour comprendre que le client a terminé
   $count = 0;
   $total = 0;
   foreach ($_SESSION['caddie'] as $cle=>$valeur) {                                  // calcul du total de son caddie
    $total += $_SESSION['caddie'][$cle]["prix"] * $_SESSION['caddie'][$cle]["qte"];
    $count += $_SESSION['caddie'][$cle]["qte"];
    }
   $destinataire = $_GET['email'];                                            // envoi d'un email de confirmation de la commande
   $prenom = $_GET['prenom'];
   $nom = $_GET['nom'];
   $adresse = $_GET['adresse'];
   $cp = $_GET['cp'];
   $ville = $_GET['ville'];
   echo $destinataire.' '.$prenom.' '.$nom.' '.$adresse.' '.$cp.' '.$ville;
   $objet = "[PhotoBlogPro] Confirmation de votre commande" ;
   $message = '
   <html>
   <head>
   <b>PhotoBlogPro </b>vous remercie pour cette commande de '.$count.' image(s) sur notre site, pour un montant total de '.$total.' &euro;.<br>
   Vous recevrez vos photos au : <br>'.$adresse.'<br>'.$cp.' '.$ville.'
   <br><br><b>A bientot '.$prenom.' '.$nom.' sur PhotoBlogPro !</b><br><br>L\'équipe PhotoblogPro</body>
   </html>
   ';
 
   // Si l’on veut envoyer un mail au format HTML, il faut configurer le type Content-type.
   $headers = "MIME-Version: 1.0\n";
   $headers .= "Content-type: text/html; charset=iso-8859-1\n";
 
   // Quelques types d’entêtes : errors, From cc's, bcc's, etc
   $headers .= "From: PhotoBlogPro <Photoblogpro@ece.fr>\n";
 
    // On envoi l’email
    mail($destinataire, $objet, $message, $headers);
  } // fin ajouter == -2
} // fin isset(ajouter)
 
 
/**************************************************************
En dessous se trouvent la fonction javascript verif_form qui
permet de verifier que tous les champs d'un formulaire
ont été rempli. Il est utilisé pour le formulaire
de fin de commande (cf fin du fichier)
Ensuite, se trouve la fonction visibilite qui permet ici
d'afficher une section <div></div> dont le nom est passé
en parametre.
**************************************************************/
?>
<script type="text/javascript">
test_text = "*"; // à renseigner si on utilise une chaîne de caractère identique pour chaque label de champs obligatoire
test_class = ""; // à renseigner si on identifie les labels par une class css
message = "Merci de remplir tous les champs obligatoires";
 
function verif_form(formulaire) {
	vide = 0;
	for ( var i=0; i<formulaire.getElementsByTagName("label").length; i++ ) {
		element_label = formulaire.getElementsByTagName("label")[i];
		txt_label = element_label.firstChild.nodeValue;
		class_label = element_label.className;
		if ( (test_text != "" && txt_label.indexOf(test_text) != -1) || (test_class != "" && class_label == test_class) ) {
			if ( element_label.getAttribute("htmlFor") || element_label.getAttribute("for") ) {
				if ( document.all ) id_champs = element_label.getAttribute("htmlFor");
				else id_champs = element_label.getAttribute("for");
				champs = document.getElementById(id_champs);
				if ( champs.tagName == "INPUT" && champs.getAttribute("type") == "text" ) {
					if ( champs.value == "" ) vide ++;
				}
				else if ( champs.tagName == "TEXTAREA" && champs.value == "" ) vide ++;
			}
			else {
				if ( element_label.getElementsByTagName("input")[0] ) {
					input_label = element_label.getElementsByTagName("input")[0];
					if ( input_label.getAttribute("type") == "text" && input_label.value == "" ) vide ++;
				}
				else if ( element_label.getElementsByTagName("textarea")[0] && element_label.getElementsByTagName("textarea")[0].value == "" ) vide ++;
			}
		}
	}
	for (var j=0; j<formulaire.getElementsByTagName("select").length; j++ ) {
		liste = formulaire.getElementsByTagName("select")[j];
		for ( var k=0; k<liste.options.length; k++) {
			if ( liste.options[k].selected == true && liste.options[k].value == "" ) vide ++;
		}
	}
	if ( vide != 0 ) {
		alert(message);
		return false;
	}
	else {
		return true;
	}
}
window.onload = function() {
	document.getElementsByTagName("form")[0].onsubmit =
	function () { return verif_form(this); }
}
</script>
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
}
}
</script>
<?php
/*****************************************
 Ici commence l'affichage du caddie
 en fonction de différents parametre
 - l'utilisateur a t il terminé sa commande ?
 - le caddie est il vide ?
 - Cas normal
******************************************/
 
echo '<link rel="stylesheet" href="wp-admin/wp-admin.css?version=2.0.4" type="text/css" />';
echo '<div class="wrap">';
if ($_SESSION['commande'] == 1)                // si la commande est terminée
  {
   echo '<h2>Fin de la commande</h2><br><table id="the-list-x" cellspacing="3" cellpadding="3" width="100%"><tr>';
   echo 'PhotoBlogPro vous remercie pour cette commande <br> Un mail r&eacute;capitulatif de la commande vous a &eacute;t&eacute; envoy&eacute sur '.$_GET['email'].'<br>';
  }
if ($_SESSION['commande'] == 0) echo '<h2>Caddie</h2><br><table id="the-list-x" cellspacing="3" cellpadding="3" width="100%"><tr>';
else echo '<h2>R&eacute;capitulation de votre commande</h2><br><table id="the-list-x" cellspacing="3" cellpadding="3" width="100%"><tr>';
echo '<th scope="col" align="center">Nom de la photo</th><th scope="col"align="center">Prix unitaire</th><th scope="col" align="center">';
echo 'Quantit&eacute;</th><th scope="col" width="23" align="center">Total</th>';
if ($_SESSION['commande'] == 0) echo '<th scope="col" width="34" align="center">Action</th>';
echo '</tr>';
 
// affichage du tableau avec les différents objets contenus dans le caddie
$i = 1;
$count = count($_SESSION['caddie']);
if ($count){
  $tot_prix = 0;
  foreach ($_SESSION['caddie'] as $cle=>$valeur)
    {
    $i++;
    $tot_prix += $_SESSION['caddie'][$cle]["prix"] * $_SESSION['caddie'][$cle]["qte"];
    echo ("<tr id='page-$i' class='");
      if ($i%2)
        echo ("'>");
      else
        echo ("alternate'>");
    echo '<td align="center" valign="middle">'.$cle.'</td>';   // nom de l'image
    echo '<td align="center" valign="middle">'.$_SESSION['caddie'][$cle]["prix"].' &euro;</td>';
    echo '<td align="center" valign="middle">'.$_SESSION['caddie'][$cle]["qte"].'</td>';
    echo '<td align="center" valign="middle">'.$_SESSION['caddie'][$cle]["prix"] * $_SESSION['caddie'][$cle]["qte"].' &euro;</td>';
    if ($_SESSION['commande'] == 0) ?><td align="center" valign="middle"><a href="javascript:showPopWin('ed-caddie.php?ajouter=-1&imgID=<?php echo $cle ?>', 800, 600, null);">Retirer</a></td><?php
    echo '</tr>';                                                                  //dans le lien au dessus, une pinade pour réafficher le caddie dans la popup, en retirant un element
    }                                                                              // voir s'il n'y a pas une autre methode pour changer l'url pointée par la popup ...
    echo ("<tr id='page-$i' class='alternate'>");
    echo '<td align="center"><b>'.$count.' article(s)</b></td><td>&nbsp;</td><td align="center" colspan="2"><b>TOTAL : '.$tot_prix.' &euro;</B>';
    if ($_SESSION['commande'] == 0) ?></td><td align="center"><a href="javascript:showPopWin('javascript:visibilite(\'Commande\')',800,600,null)">Valider</a></td> <?php
echo '</tr>';                                                 //  Grosse pinade encore pour afficher le <div> </div> de bas de page contenant le formulaire de commande
} else {                                                      // meme chose qu'au dessus, voir si on peut pas faire autrement, faire un autre fichier ... mais le resultat est classe
 echo '<tr><td id="page-1" class="alternate" colspan="5" align="center"> <b>Votre caddie est vide</b> </td></tr>';}
if ($_SESSION['commande'] == 1)  // réinitialisation des variables de session
  {
    $_SESSION['commande'] = 0;
    $_SESSION['caddie'] = array();  // on vide le caddie
  }
 
//////////////// Fin de la partie affichage du caddie
 
 
 
 
 
/******************************************************************************************
La derniere partie concerne le
formulaire qui pose probleme.
C'est un <div> qui répond au joli nom de
Commande et aui contient un formulaire.
Normalement, il faudrait qu'il renvoie à une page
(ici ed-caddie.php) le résultat (les infos de chaque input)
pour pouvoir etre traité comme une fin de commande (avec ajouter = -2, cf en haut)
Le probleme étant qu'on arrive pas à gérer l'envoi des parametre
Il y a en dessous plusieurs tests, mais aucun ne fonctionne vraiment
******************************************************************************************/
?>
</table>
<div id="Commande" style="display:none;">
<br>
<h2>Validation de la commande</h2>
 
<form method="get" action="javascript:var nom=document.getElementById(\"nom\").value;var prenom=document.getElementById("prenom").value;
var adresse=document.getElementById("adresse").value;var cp=document.getElementById("cp").value;var ville=document.getElementById("ville").value;
var email=document.getElementById("email").value;showPopWin('ed-caddie.php?ajouter=-2&nom='+nom+'&prenom='+prenom+'&adresse='+adresse+'&cp='+cp+'&ville='+ville+'&email='+email)">
<!--showPopWin('ed-caddie.php?ajouter=-2&nom='+nom+'&prenom='+prenom+'&adresse='+adresse+'&cp='+cp+'&ville='+ville+'&email='+email, 800, 400, null);"> /-->
 
<!-- <form method="POST" action="ed-caddie.php" target="_self"> /-->
<!-- <form method="POST" onsubmit="for(var i=0;i<this.elements.length;i++){alert(this.elements[i].value)}"> /-->
<!--<form method="post" target="this.document.getElementById('popupFrame')">                        /-->
<table id="the-list-x" cellspacing="3" cellpadding="3" align="center">
<tr>
 <th scope="col" width="170" align="center"><!--<input type="hidden" id="ajouter" value="-2">--><label>* Nom : <input type="text" id="nom" value=""></label></th>
 <th scope="col" width="130" align="center"><label>* Pr&eacute;nom : <input type="text" id="prenom" value=""></label></th></tr>
<tr>
 <th scope="col" align="center" colspan="2"><label>* Adresse : <input type="text" id="adresse" size="40" value=""></label></th></tr>
<tr>
 <th scope="col" align="center"><label>* Code postal : <input type="text" id="cp" size="7" value=""></label></th><th scope="col" align="center"><label>* Ville : <input type="text" id="ville" value=""></label></th></tr>
<tr>
 <th scope="col" align="center" colspan="2"><label>* E-mail : <input type="text" id="email" size="40" value=""></label></th></tr>
<tr>
 <th scope="col" align="center" colspan="2"><br> <input type="submit" value="Terminer ma commande"> <!--onclick="document.getElementById('popupFrame').innerHTML='ceci est un test'">/-->
 <!--input type="submit" name="commander" value="Terminer ma commande" onclick="for(var i=0;i<this.form.elements.length;i++){alert(this.form.elements[i].value)}"> /-->
 <!--<input type="submit" name="commander" value="Terminer ma commande" onclick="function vals( f ) {var s='';for(var i=0;i<f.elements.length;i++){s+='&'+f.elements[i].name+'='+f.elements[i].value}return s};
 document.getElementByID('popupFrame').src='ed-caddie.php?'+vals(this.form);for(var i=0;i<this.form.elements.length;i++){alert(this.form.elements[i].value)}">   /-->
 <!-- <input type="submit" value="Terminer la commande" onsubmit="var nom=this.form.elements[1].value;var prenom=this.form.elements[2].value;
var adresse=this.form.elements[3].value;var cp=this.form.elements[4].value;var ville=this.form.elements[5].value;
var email=this.form.elements[6].value;
javascript:showPopWin('ed-caddie.php?ajouter=-2&nom='+nom+'&prenom='+prenom+'&adresse='+adresse+'&cp='+cp+'&ville='+ville+'&email='+email, 800, 400, null);"> /-->
 
 </th></tr>
</table></form>
</div></div>

Quelqu'un a t il une solution à me proposer ? C'est un travail que je dois rendre demain, donc le temps presse...

Merci d'avance pour votre aide!

Citation:

Cependant, quand j'essaye de l'utiliser dans mon fichier ed-caddie.php (en l'ayant récupéré avec un $_GET['qte'] assez simple), j'ai une erreur comme quoi l'index n'est pas défini.

Le problème est en fait assez simple: Le formulaire n'est pas envoyé, au contraire au lieu de l'envoyer vers une adresse, cette adresse est remplacée par une action en javascript.

C'est ce qui explique que tu n'arrivais pas à recevoir $_GET['qte']...
Dépendamment de ton contexte d'utilisation (et si tu ne cherche pas à être compatible XHTML Strict), tu pourrais simplement:
- mettre un target="_blank" comme attribut de ton formulaire.
- mettre l'adresse normale de la page dans l'attribut action="" de ton formulaire

Et normalement les données du formulaire seront envoyées sans problème.