[AJAX] Données formulaire en POST non-trasmises

**gwinyam** · 03/01/2007, 16h10

Bonjour à tous

J'ai cherché un peu sur le forum, dans les tutos, j'ai essayé tout un tas de truc, mais je n'arrive décidemment pas à résoudre mon problème, problème que vous trouverez peut-être simple, mais là moi je suis un newb total en ce qui concerne Javascript et encore plus Ajax

J'ai un formulaire dans une page, je souhaite envoyer par la méthode POST les données à une page de traitement PHP qui m'affichera un résultat dans une DIV au dessus du formulaire, bien évidemment en utilisant Ajax.

Alors j'arrive bien à appeller mon code Ajax, je récupère correctement les données (j'utilise un alert() pour controler), je les met en forme comme je l'ai vu dans le forum pour les passer avec xhr.send(), mais là dans le script PHP de traitement, les variables POST ne sont pas reconnus et bien évidemment le traitement foire. Est-ce que vous avez une idée de mon erreur svp?

Sachant que le fichier de traitement est trouvé et que les données récupérées par Javascript sont les bonnes. Il semble donc que c'est dans la transmission ou alors dans ma façon de récupérer les données dans le traitement PHP que ça cafouille...

Voilà le code du formulaire:

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
<div id="alerte"></div>
Vous pouvez modifier votre mot de passe gr&acirc;ce au formulaire suivant :
<br><br>
<form name="modifpwd" onsubmit="javascript: return false;">
<table>
<tr>
<td>Votre mot de passe actuel : </td>
<td><input type="password" name="old_pwd"></td>
</tr>
<tr>
<td>Votre nouveau mot de passe : </td>
<td><input type="password" name="new_pwd"></td>
</tr>
<tr>
<td>Confirmez votre nouveau mot de passe : </td>
<td><input type="password" name="new_pwd1"></td>
</tr>
<tr>
<td align="right" colspan="2"><input type="submit" value="Modifier" name="cmdok" onclick="javascript: ajax('op/op-changePWD.php', 'alerte', 'POST', 'modifpwd');" /></td>
</tr>
</table>
</form>

Code Ajax utilisé:

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
<script language="JavaScript">
function getFormData(form)
{
var data = "";
var form = document.getElementById(form);
var elements = form.elements;
for(var i=0; i<form.length; i++)
{
data += elements[i].name + "=" + elements[i].value;
if((i+1)<form.length)
{
	data+="&";
}
//alert('Element: '+elements[i].name+" \nValeur: "+elements[i].value);
}
return data;
}
 
function ajax(fichier, div, method, form)
{ 
var xhr=null;
 
var data="null";
if(form!="null")
{
data = getFormData(form);
}
 
if (window.XMLHttpRequest)
{ 
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) 
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//on appelle le fichier reponse.txt
xhr.open( method, fichier, false);
alert("Fichier: "+fichier+"\nDonnées: "+data);
xhr.send(data);
 
document.getElementById(div).innerHTML=xhr.responseText;
} 
</script>

Le code PHP de traitement (j'ai retiré le script de connexion pour raisons de confidentialité):

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
<?
$query = "SELECT id, password FROM user WHERE login='".$_SESSION['site-log']."' AND etat=1";
$req = mysql_query($query) or die ("Erreur SQL de vérification de compte");
$rez = mysql_fetch_assoc($req);
 
$resultat="0";
 
if($_POST['old_pwd']!="")
{
$old_pwd=$_POST['old_pwd'];
}
else
{
$resultat="c3";
}
 
if($resultat==0 && md5($old_pwd)!=$rez['password'])
{
$resultat="c3";
}
 
if($resultat==0 && $_POST['new_pwd']!="")
{
$new_pwd=$_POST['new_pwd'];
}
else
{
$resultat="c2";
}
 
if($resultat==0 && $_POST['new_pwd1']!="")
{
$new_pwd1=$_POST['new_pwd1'];
}
else
{
$resultat="c2";
}
 
if($resultat==0 && $new_pwd1!=$new_pwd)
{
$resultat="c2";
}
 
if($resultat==0)
{
$query = "UPDATE user SET password='".md5($new_pwd)."' WHERE id=".$rez['id'];
$req = mysql_query($query) or die ("Erreur SQL de modification de compte");
$_SESSION['studionet-pwd']=md5($_POST['new_pwd']);
$resultat="c1";
}
echo($resultat);
?>

Voici le retour de l'exécution et donc ce que s'affiche dans mon DIV:

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
Notice: Undefined index: old_pwd in c:\program files\easyphp1-8\www\studionet\op\op-changepwd.php on line 33
 
Notice: Undefined variable: old_pwd in c:\program files\easyphp1-8\www\studionet\op\op-changepwd.php on line 42
 
Notice: Undefined index: new_pwd in c:\program files\easyphp1-8\www\studionet\op\op-changepwd.php on line 47
 
Notice: Undefined index: new_pwd1 in c:\program files\easyphp1-8\www\studionet\op\op-changepwd.php on line 56
 
Notice: Undefined variable: new_pwd1 in c:\program files\easyphp1-8\www\studionet\op\op-changepwd.php on line 65
 
Notice: Undefined variable: new_pwd in c:\program files\easyphp1-8\www\studionet\op\op-changepwd.php on line 65
 
Notice: Undefined variable: new_pwd in c:\program files\easyphp1-8\www\studionet\op\op-changepwd.php on line 72
 
Notice: Undefined index: new_pwd in c:\program files\easyphp1-8\www\studionet\op\op-changepwd.php on line 74
c1

Comme vous pouvez le voir, aucune donnée n'a été récupérée par PHP. Comme qui dirait, c'est un peu génant. Donc si vous pensez pouvoir m'aider, n'hésitez pas. Merci d'avance.

Gwinyam

**Herode** · 03/01/2007, 16h49

Avec this.req comme objet de type XMLHttpRequest :

Code :

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

1
2
3
4
5
6
7
8
9
 
this.req.open( this.method, this.url, true );
if ( this.method == "POST" ) {
   this.req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
   this.req.send( params );		
}
else {
   this.req.send( null );		
}

**gwinyam** · 03/01/2007, 16h59

Euh je sais pas si ton truc marche, mais j'ai trouvé la réponse...enfin on m'a un peu aidé quand même...

Dans le code Ajax, j'avais oublié ça:

Code :

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

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

J'ai honte parfois...

Merci quand même

**yacinechaouche** · 10/01/2007, 16h32

Just au cas où moi j'ajouterai une couche escape avant d'envoyer les données en post.

Y.Chaouche

**gwinyam** · 19/01/2007, 16h31

C'est à dire?

Désolé, je débute totalement...

**yacinechaouche** · 19/01/2007, 17h00

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
function getFormData(form)
{
var data = "";
var form = document.getElementById(form);
var elements = form.elements;
for(var i=0; i<form.length; i++)
{
data += escape(elements[i].name + "=" + elements[i].value);
if((i+1)<form.length)
{
	data+="&";
}
//alert('Element: '+elements[i].name+" \nValeur: "+elements[i].value);
}
return data;
}

Ceci permet d'envoyer correctement les accents, les caractères spéciaux etc.

Y.Chaouche

**gwinyam** · 22/01/2007, 13h34

Ouah!!! Merci, c'est un problème que je viens de rencontrer et je cherchais justement une solution

Merci, tu gères!!!

**yacinechaouche** · 22/01/2007, 13h41

chaouche pawa

**gwinyam** · 22/01/2007, 13h52

Par contre il y a un problème, quand je mets un <input type="hidden" ...>, il ne le retrouve pas alors qu'il le trouve très bien sans le escape.

Normal docteur?

**yacinechaouche** · 22/01/2007, 14h05

Je doute que le problème vienne de cette fonction.
Cette fonction prends tous les "é" dans une chaine de caractère et les remplace par son code hexadecimal, quelque chose comme "%F2".

Es-tu sûre que ce soit vraiment escape qui cause le problème ?

Y.Chaouche

**gwinyam** · 22/01/2007, 14h14

Oui, j'en suis sur, j'ai testé avec et sans. Quand il n'y a pas ça passe impecablement mais forcément les caractères spéciaux passent mal, par contre quand je mets escape(), je me fais jeter dès le début parce que j'aibesoin du champ caché pour le traitement...je vais tenter autrement pour voir, mais je t'accorde qu'à première vue, il n'y a pas de lien...

**gwinyam** · 23/01/2007, 23h04

J'ai testé d'autres trucs, en fait ce n'est pas le problème que le champ soit de type caché ou non qui fait planter l'exécution. Le champ n'est juste pas pris en compte...je vais faire quelques essais complémentaires et je vous en reparle plus tard, mais là je suis surpris...

**gwinyam** · 24/01/2007, 22h51

En fait je perds l'accès à toutes mes données avec l'instruction escape...

Normal docteur?

**gwinyam** · 24/01/2007, 22h53

C'est bon j'ai compris le problème, c'est juste une mauvaise utilisation de escape() qui faisait que je convertissais aussi les "&" et les "=" de mes blocs de données à transmettre...forcément

**yacinechaouche** · 25/01/2007, 08h55

Content que tu ai pu résoudre ton prob.

Y.Chaouche

**gwinyam** · 25/01/2007, 10h36

Merci

En fait, tu m'avais donné la bonne fonction, mais pas au bon endroit

Pour ceux que ça intéresse, la fonction corrigée:

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
function getFormData(form)
{
var data = "";
var form = document.getElementById(form);
var elements = form.elements;
for(var i=0; i<form.length; i++)
{
data += elements[i].name + "=" + escape(elements[i].value);
if((i+1)<form.length)
{
	data+="&";
}
}
return data;
}

**yacinechaouche** · 25/01/2007, 11h09

Au temps pour moi !

**yacinechaouche** · 25/01/2007, 11h15

Pour ceux que ça interesse :

http://www.langue-fr.net/index/A/au_temps-autant.htm

**gwinyam** · 05/02/2007, 15h17

Petite mise à jour pour améliorer la compatibilité:

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
function getFormData(form)
	{
		var data1 = "";
		var form = document.getElementById(form);
		var elements = form.elements;
		for(var i=0; i<form.length; i++)
			{
				data1 += elements[i].name + "=" +escape(elements[i].value);
				if((i+1)<form.length)
					{
						data1+="&";
					}
				//alert('Element: '+elements[i].name+" \nValeur: "+elements[i].value);
			}
		return data1;
	}
 
function ajax(fichier, div, method, form)
	{
		var xhr=null;
		var data="null";
 
		if(form!="null")
		{
			if(method=="GET")
			{
			data=form;
			method="POST";
			}
			else
			{
			data = getFormData(form);
			}
		}
		//alert("Fichier: "+fichier+"\nDiv: "+div+"\nMéthode: "+method+"\nDonnées: "+data);
 
		if (window.XMLHttpRequest)
		{
			xhr = new XMLHttpRequest();
		}
		else if (window.ActiveXObject)
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xhr.open( method, fichier, false);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(data);
 
		if (document.getElementById)
			{
					document.getElementById(div).innerHTML=xhr.responseText;
			}
			else
			{
					if (document.layers)
					{
							document.div.innerHTML=xhr.responseText;
					}
					else
					{
							document.all.div.innerHTML=xhr.responseText;
					}
			}
	}