[AJAX] Vérification données par appel AJAX

**richard_sraing** · 23/03/2011, 13h49

Bonjour à tous,

Je souhaite réaliser la vérification des données saisies dans mon formulaire par appel à un fichier php (de manière à réaliser la vérification côté serveur). Pour ce faire, je dois utiliser un appel AJAX synchrone. Voici donc ce que j'ai pour l'instant.

Code Javascript :

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
function createConnection(){
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
 
	return xmlhttp;
}
 
function verificationFormulaire(){
 
	var connection = createConnection();
 
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			alert ('retour de fonction');
		}
	}
 
	connection.open ("POST", "http://www.malmundarium.be/inc/verification.php", false);
	var requete = "groupname="+document.getElementById("groupname").value;
	requete += "&grouppostal="+document.getElementById("grouppostal").value;
	requete += "&langue="+document.getElementById("langue").value;
	requete += "&participants="+document.getElementById("participants").value;
	requete += "&accompagnants="+document.getElementById("accompagnants").value;
	requete += "&datevisite="+document.getElementById("datevisite").value;
	requete += "&heurevisite="+document.getElementById("heurevisite").value;
	requete += "&respfirst="+document.getElementById("respfirst").value;
	requete += "&resplast="+document.getElementById("resplast").value;
	requete += "&respaddr="+document.getElementById("respaddr").value;
	requete += "&resptown="+document.getElementById("resptown").value;
	requete += "&resppostal="+document.getElementById("resppostal").value;
	requete += "&respphone="+document.getElementById("respphone").value;
	requete += "&respmail="+document.getElementById("respmail").value;
 
	connection.send(requete);
}

Au niveau de mon fichier formulaire, j'ai ceci :

Code HTML :

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

1
2
3
4
5
 
<form method="POST" name="reservationform" id="reservationform" action="./inc/reservation.php" >
<!-- tous les champs de mon formulaire -->
<input type="submit" name="" value="Envoyer" onClick="return verificationFormulaire();" id="" tabindex="23" />
</form>

Au niveau de mon fichier servant à la vérification des valeurs, j'ai ceci :

Code PHP :

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
<?php
 
$groupname = (!empty ($_POST['groupname'])) ? strip_tags($_POST['groupname']) : null;
$groupaddr = (!empty ($_POST['groupaddr'])) ? strip_tags($_POST['groupaddr']) : null;
$grouppostal = (!empty ($_POST['grouppostal'])) ? strip_tags($_POST['grouppostal']) : null;
$langue = (!empty ($_POST['langue'])) ? strip_tags($_POST['langue']) : null;
$participants = (!empty ($_POST['participants'])) ? strip_tags($_POST['participants']) : 0;
$accompagnants = (!empty ($_POST['accompagnants'])) ? strip_tags($_POST['accompagnants']) : -1;
$mobred = (!empty ($_POST['mobred'])) ? strip_tags($_POST['mobred']) : 0;
$datevisite = (!empty ($_POST['datevisite'])) ? strip_tags($_POST['datevisite']) : null;
$heurevisite = (!empty ($_POST['heurevisite'])) ? strip_tags($_POST['heurevisite']) : null;
$guided = (!empty ($_POST['guidee'])) ? strip_tags($_POST['guidee']) : 0;
$carnaval = (!empty ($_POST['carnaval'])) ? strip_tags($_POST['carnaval']) : 0;
$papier = (!empty ($_POST['papier'])) ? strip_tags($_POST['papier']) : 0;
$tresor = (!empty ($_POST['tresor'])) ? strip_tags($_POST['tresor']) : 0;
$respfirst = (!empty ($_POST['respfirst'])) ? strip_tags($_POST['respfirst']) : null;
$resplast = (!empty ($_POST['resplast'])) ? strip_tags($_POST['resplast']) : null;
$respaddr = (!empty ($_POST['respaddr'])) ? strip_tags($_POST['respaddr']) : null;
$resppostal = (!empty ($_POST['resppostal'])) ? strip_tags($_POST['resppostal']) : null;
$resptown = (!empty ($_POST['resptown'])) ? strip_tags($_POST['resptown']) : null;
$respcountry = (!empty ($_POST['respcountry'])) ? strip_tags($_POST['respcountry']) : null;
$respphone = (!empty ($_POST['respphone'])) ? strip_tags($_POST['respphone']) : null;
$respmail = (!empty ($_POST['respmail'])) ? strip_tags($_POST['respmail']) : null;
$montant = 0;
 
// if ( !$groupname || !$grouppostal || !$langue || !$participants || !$accompagnants || !$datevisite || !$heurevisite || !$respfirst || !$resplast || !$respphone ){
	// echo 'false';
	// exit;
// }
$erreur = ";";
if( $groupname == null)
	$erreur .= 'groupname='.$groupname.';';
if( $grouppostal == null)
	$erreur .= 'grouppostal='.$grouppostal.';';
if( $langue == null)
	$erreur .= 'langue='.$langue.';';
if( $participants == 0)
	$erreur .= 'participants='.$participants.';';
if( $accompagnants == 0)
	$erreur .= 'accompagnants='.$accompagnants.';';
if( $datevisite == null)
	$erreur .= 'datevisite='.$datevisite.';';
if( $heurevisite == null)
	$erreur .= 'heurevisite='.$heurevisite.';';
if( $respfirst == null)
	$erreur .= 'respfirst='.$respfirst.';';
if( $resplast == null)
	$erreur .= 'resplast='.$resplast.';';
if( $respphone == null)
	$erreur .= 'respphone='.$respphone.';';
 
if( $erreur==";")
	echo 'true';
else
	echo $erreur;
exit;
 
?>

Au niveau du code ajax, je n'obtiens jamais le message d'alerte 'retour de fonction'.

Qu'est ce que j'ai oublié ? Que dois-je envoyer comme valeur de retour à partir de mon code php de vérification ?

Je suis dans le cake pour l'instant, et ne m'y retrouve plus, quelqu'un peut-il me donner une bougie pour éclairer ma lanterne ?

En vous remerciant pour l'aide que vous pourrez m'apporter, je vous souhaite de passer une bonne après midi.

**Nesmontou** · 23/03/2011, 22h36

Bonsoir,

Il me semble que le problème vient du fait que tu déclares la variable connection mais tu gères l'état de xmlhttp.

Il faudrait plutôt faire

Code :

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

1
2
3
4
5
6
connection.onreadystatechange=function() {
	if (connection.readyState==4 && connection.status==200)
	{
		alert ('retour de fonction');
	}
}

Bon développement

**richard_sraing** · 24/03/2011, 08h28

Oups, effectivement, j'ai oublier de mettre cette partie à jour, car l'air de rien, j'ai continuer à chercher une solution, et suis tombé la dessus :

Mon fichier "verification.php"

Code PHP :

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
<?php
 
$groupname = (!empty ($_POST['groupname'])) ? strip_tags($_POST['groupname']) : null;
$grouppostal = (!empty ($_POST['grouppostal'])) ? strip_tags($_POST['grouppostal']) : null;
$langue = (!empty ($_POST['langue'])) ? $_POST['langue'] : null;
$participants = (!empty ($_POST['participants'])) ? strip_tags($_POST['participants']) : 0;
$accompagnants = (!empty ($_POST['accompagnants'])) ? strip_tags($_POST['accompagnants']) : 0;
$datevisite = (!empty ($_POST['datevisite'])) ? strip_tags($_POST['datevisite']) : null;
$heurevisite = (!empty ($_POST['heurevisite'])) ? strip_tags($_POST['heurevisite']) : null;
$respfirst = (!empty ($_POST['respfirst'])) ? strip_tags($_POST['respfirst']) : null;
$resplast = (!empty ($_POST['resplast'])) ? strip_tags($_POST['resplast']) : null;
$respaddr = (!empty ($_POST['respaddr'])) ? strip_tags($_POST['respaddr']) : null;
$resppostal = (!empty ($_POST['resppostal'])) ? strip_tags($_POST['resppostal']) : null;
$resptown = (!empty ($_POST['resptown'])) ? strip_tags($_POST['resptown']) : null;
$respphone = (!empty ($_POST['respphone'])) ? strip_tags($_POST['respphone']) : null;
 
$erreur = ";";
if( $groupname == null)
	$erreur .= 'groupname='.$groupname.';';
if( $grouppostal == null)
	$erreur .= 'grouppostal='.$grouppostal.';';
if( $langue == null)
	$erreur .= 'langue='.$langue.';';
if( $participants == 0)
	$erreur .= 'participants='.$participants.';';
if( $accompagnants == 0)
	$erreur .= 'accompagnants='.$accompagnants.';';
if( $datevisite == null)
	$erreur .= 'datevisite='.$datevisite.';';
if( $heurevisite == null)
	$erreur .= 'heurevisite='.$heurevisite.';';
if( $respfirst == null)
	$erreur .= 'respfirst='.$respfirst.';';
if( $resplast == null)
	$erreur .= 'resplast='.$resplast.';';
if( $respphone == null)
	$erreur .= 'respphone='.$respphone.';';
 
if( $erreur === ";")
	echo 'true';
else
	echo $erreur;
 
exit;
?>

Mon fichier ajax.js contient ce qui suit :

Code JAVASCRIPT :

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
function createConnection(){
	var xmlhttp = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xmlhttp = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xmlhttp = false; 
	} 
	return xmlhttp
}
 
function verificationFormulaire(){
 
	var connection = createConnection();
 
	connection.onreadystatechange=function() {
		if (connection.readyState==4 && connection.status==200)
		{
			alert ('valeur retournee : '+connection.response);
			if(connection.responseText != "true"){
				// checkmust(); // ne pas en tenir compte
				alert ('pas bon');
				return false;
			}
			else{
				connection.open("POST", "./inc/reservation.php", false);
				requete = "groupname="+document.getElementById("groupname").value;
				requete += "&grouppostal="+document.getElementById("grouppostal").value;
				requete += "&langue="+document.getElementById("langue").value;
				requete += "&participants="+document.getElementById("participants").value;
				requete += "&accompagnants="+document.getElementById("accompagnants").value;
				requete += "&mobred="+document.getElementById("mobred").value;
				requete += "&datevisite="+document.getElementById("datevisite").value;
				requete += "&heurevisite="+document.getElementById("heurevisite").value;
				requete += "&respfirst="+document.getElementById("respfirst").value;
				requete += "&resplast="+document.getElementById("resplast").value;
				requete += "&respaddr="+document.getElementById("respaddr").value;
				requete += "&resptown="+document.getElementById("resptown").value;
				requete += "&resppostal="+document.getElementById("resppostal").value;
				requete += "&respphone="+document.getElementById("respphone").value;
				requete += "&respmail="+document.getElementById("respmail").value;
				requete += "&guided="+document.getElementById("guided").value;
				requete += "&carnaval="+document.getElementById("carnaval").value;
				requete += "&papier="+document.getElementById("papier").value;
				requete += "&tresor="+document.getElementById("tresor").value;
				requete += "&montant=0";
				requete += "&confirme=0";
				connection.send(requete);
			}
		}
	};
 
	connection.open ("POST", "./inc/verification.php", false);
	var requete = "groupname="+document.getElementById("groupname").value;
	requete += "&grouppostal="+document.getElementById("grouppostal").value;
	requete += "&langue="+document.getElementById("langue").value;
	requete += "&participants="+document.getElementById("participants").value;
	requete += "&accompagnants="+document.getElementById("accompagnants").value;
	requete += "&datevisite="+document.getElementById("datevisite").value;
	requete += "&heurevisite="+document.getElementById("heurevisite").value;
	requete += "&respfirst="+document.getElementById("respfirst").value;
	requete += "&resplast="+document.getElementById("resplast").value;
	requete += "&respaddr="+document.getElementById("respaddr").value;
	requete += "&resptown="+document.getElementById("resptown").value;
	requete += "&resppostal="+document.getElementById("resppostal").value;
	requete += "&respphone="+document.getElementById("respphone").value;
 
	connection.send(requete);
}

Et voici, que avec l'outil Firebug, je récupère systématique la chaine suivante en retour :

;groupname=;grouppostal=;langue=;participants=0;datevisite=;heurevisite=;respfirst=;resplast=;respphone=;

Ce qui me laisse penser que le fait d'envoyer les informations en POST dans mon XmlHttpRequest, je ne peut pas les récupérer avec la variable globale $_POST dans mon php (ce qui me semble tout de même très louche).

Quelqu'un aurait donc une idée de pourquoi je ne récupère pas les informations dans mon retour de mon script de vérification php ?

En vous remerciant pour l'information que vous pourrez me fournir.

**nadox** · 24/03/2011, 10h23

Bonjour,

En appel synchrone, on a pas besoin d'utiliser onreadystatechange.
La fonction send est bloquante tant que la réponse n'est pas revenue.
On peut donc faire ça :

Code javascript :

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
 
	connection.open ("POST", "http://www.malmundarium.be/inc/verification.php", false);
	var requete = "groupname="+document.getElementById("groupname").value;
	requete += "&grouppostal="+document.getElementById("grouppostal").value;
	requete += "&langue="+document.getElementById("langue").value;
	requete += "&participants="+document.getElementById("participants").value;
	requete += "&accompagnants="+document.getElementById("accompagnants").value;
	requete += "&datevisite="+document.getElementById("datevisite").value;
	requete += "&heurevisite="+document.getElementById("heurevisite").value;
	requete += "&respfirst="+document.getElementById("respfirst").value;
	requete += "&resplast="+document.getElementById("resplast").value;
	requete += "&respaddr="+document.getElementById("respaddr").value;
	requete += "&resptown="+document.getElementById("resptown").value;
	requete += "&resppostal="+document.getElementById("resppostal").value;
	requete += "&respphone="+document.getElementById("respphone").value;
	requete += "&respmail="+document.getElementById("respmail").value;
	connection.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // on précise que le contenu de la requête est bien de type post/formulaire...
	connection.send(requete); // on envoie la requête synchrone
 var serverResponse = connection.responseText;
 alert(serverResponse); // ICI on a la réponse.

**richard_sraing** · 24/03/2011, 11h38

Ok, merci pour l'info, mais cela ne change malheureusement rien à mon problème que je n'arrive pas, à priori du moins, à lire les données transférées par le POST de mon XmlHttpRequest.

Des idées la dessus ??

**nadox** · 24/03/2011, 12h22

A quoi ressemble ton code javascript maintenant ?

**richard_sraing** · 24/03/2011, 13h00

Je ne poste que la partie faisant les appels par send et autres...

Code Javascript :

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
function verificationFormulaire(){
 
	var connection = createConnection();
 
	connection.open ("POST", "./inc/verification.php", false);
	var requete = "groupname="+document.getElementById("groupname").value;
	requete += "&grouppostal="+document.getElementById("grouppostal").value;
	requete += "&langue="+document.getElementById("langue").value;
	requete += "&participants="+document.getElementById("participants").value;
	requete += "&accompagnants="+document.getElementById("accompagnants").value;
	requete += "&datevisite="+document.getElementById("datevisite").value;
	requete += "&heurevisite="+document.getElementById("heurevisite").value;
	requete += "&respfirst="+document.getElementById("respfirst").value;
	requete += "&resplast="+document.getElementById("resplast").value;
	requete += "&respaddr="+document.getElementById("respaddr").value;
	requete += "&resptown="+document.getElementById("resptown").value;
	requete += "&resppostal="+document.getElementById("resppostal").value;
	requete += "&respphone="+document.getElementById("respphone").value;
 
	connection.send(requete);
 
	var reponserveur = connection.responseText;
	if(reponserveur != "true"){
		checkmust();
		alert ('pas bon');
		return false;
	}
	else{
		connection.open("POST", "./inc/reservation.php", false);
		requete = "groupname="+document.getElementById("groupname").value;
		requete += "&grouppostal="+document.getElementById("grouppostal").value;
		requete += "&langue="+document.getElementById("langue").value;
		requete += "&participants="+document.getElementById("participants").value;
		requete += "&accompagnants="+document.getElementById("accompagnants").value;
		requete += "&mobred="+document.getElementById("mobred").value;
		requete += "&datevisite="+document.getElementById("datevisite").value;
		requete += "&heurevisite="+document.getElementById("heurevisite").value;
		requete += "&respfirst="+document.getElementById("respfirst").value;
		requete += "&resplast="+document.getElementById("resplast").value;
		requete += "&respaddr="+document.getElementById("respaddr").value;
		requete += "&resptown="+document.getElementById("resptown").value;
		requete += "&resppostal="+document.getElementById("resppostal").value;
		requete += "&respphone="+document.getElementById("respphone").value;
		requete += "&respmail="+document.getElementById("respmail").value;
		requete += "&guided="+document.getElementById("guided").value;
		requete += "&carnaval="+document.getElementById("carnaval").value;
		requete += "&papier="+document.getElementById("papier").value;
		requete += "&tresor="+document.getElementById("tresor").value;
		requete += "&montant=0";
		requete += "&confirme=0";
		connection.send(requete);
	}
}

**Eric2a** · 24/03/2011, 13h07

Salut,

Ajoute la ligne (présente dans le code de nadox) faisant appel à la méthode setRequestHeader

Code :

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

1
2
connection.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // on précise que le contenu de la requête est bien de type post/formulaire...
connection.send(requete); // on envoie la requête synchrone

pour voir.

**nadox** · 24/03/2011, 13h37

Oui Eric2a, c'est pour ça que je demandais le code à jour

**richard_sraing** · 24/03/2011, 14h59

Mais il semblerait que ça marche.

Je n'ai pas encore tout vérifier, mais j'ai entre aperçu une valeur true en retour, ....

Sauf que maintenant, on me demande une fois de plus de changer le formulaire..., donc je retourne dans le HTML / PHP.

Je vais toujours mettre le message en résolu, jusqu'au prochain soucis.

**richard_sraing** · 25/03/2011, 14h58

Voilà, je confirme que tout fonctionne correctement.

J'ai enfin fini de réaliser les vérifications de mes données.

Maintenant, il ne me reste qu'à vérifier l'ajout dans ma base de données, et tout sera bon.

[AJAX] Vérification données par appel AJAX

AJAX

Discussions similaires

Partager

Partager