[AJAX] Fonction qui exécute la validation d'un formulaire

**yann123456** · 29/05/2009, 17h07

Bonjour,

J'espère poster au bon endroit (J'ai hésité entre javscript et ajax).

J'exécute la fonction ci-dessous lors de la validation d'un formulaire.

Code :

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

onsubmit="return valider_form()"

Quelques soit les infos du formulaire il m'affiche le message "oups" qui est la valeur par défaut du message.

Je n'arrive donc pas exécuter ou récupéré les infos de verif-form.php.

Pourriez-vous me dire ce qui ne va pas.

La fonction valider_form:

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
 
function valider_form(){
 
  var data = null;
  data = "prix_mini="+document.forms['rechercher'].elements['prix_mini'].value+"&prix_maxi="+document.forms['rechercher'].elements['prix_maxi'].value;
 
  var xhr_object = null;
  var lemessage = "oups";
 
   if(window.XMLHttpRequest) // Firefox
      xhr_object = new XMLHttpRequest();
   else if(window.ActiveXObject) // Internet Explorer
      xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      return;
   }
 
   xhr_object.open("POST", "verif-form.php", true);
 
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4) {
         eval(xhr_object.responseText);		 		 
	  }
   }
 
  xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr_object.send(data);
 
  if(lemessage == "ok") {
	return true;
  }
  else {
	AffMessage('alerte_form',lemessage);
	return false;
  }
}

et le fichier verif-form.php:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
header('Content-type: text/html; charset=charset=utf-8');
 
if ($_POST["prix_mini"]>$_POST["prix_maxi"])
{
        echo 'lemessage="Prix mini doit etre inferieur a prix maxi"';
}
else
{
        echo 'lemessage="ok"';
}
?>

Merci d'avance pour votre aide.

**emmanuel.remy** · 29/05/2009, 23h56

Salut,

Tu écris:

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
   xhr_object.open("POST", "verif-form.php", true);
	
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4) {
         eval(xhr_object.responseText);		 		 
	  }
   }
  
  xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//ICI C'EST ASYNCHRONE...
  xhr_object.send(data);

//... DONC TU PASSES LA  AVANT LE RETOUR DE TA REQUETE AJAX  
  if(lemessage == "ok") {
	return true;
  }
  else {
	AffMessage('alerte_form',lemessage);
	return false;
  }

Or comme ta requête est asynchrone le code continue de s'exécuter avant d'obtenir le retour de ton script PHP. C'est d'ailleurs pour cette raison qu'on donne une fonction de rappel su onreadystatechange , sinon on ne pourrait exécuter de code au retour du script AJAX.

ERE

**yann123456** · 01/06/2009, 16h03

Merci pour ta réponse.

j'y avais pensé mais ayant le même résultat, je n'avais pas gardé cette version.
Ceci dit c'est vrai que c'est logique. (c'est mon premier script AJAX)

Mon code deviens donc

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
 
function valider_form(){
 
  var data = null;
  data = "prix_mini="+document.forms['rechercher'].elements['prix_mini'].value+"&prix_maxi="+document.forms['rechercher'].elements['prix_maxi'].value;
 
  var xhr_object = null;
  var lemessage = "oups";
 
   if(window.XMLHttpRequest) // Firefox
      xhr_object = new XMLHttpRequest();
   else if(window.ActiveXObject) // Internet Explorer
      xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      return;
   }
 
   xhr_object.open("POST", "include/verif-form.php", true);
 
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4) {
         eval(xhr_object.responseText);
 
		 if(lemessage == "ok") {
			return true;
		  }
		  else {
			AffMessage('alerte_form',lemessage);
			return false;
		  }
	  }
   }
 
  xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr_object.send(data);  
}

Maintenant j'ai deux problème avec ce script :

1°) Le message apparait a l'écran et disparait aussitôt, ce qui n'étais pas le cas avec le code erroné précédent, je ne vois pas pourquoi.

2°) C'est toujours "oups" qui apparait, même en mettant dans verif-form.php uniquement ceci :

Code :

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

1
2
3
4
5
 
<?php
header('Content-type: text/html; charset=charset=utf-8');
echo 'lemessage="ok"';
?>

Je l'ai simplifié a ce point pour voir si c'étais mes données en post qui ne passaient pas. ma variable lemessage ne prend pas la valeur "ok".

Je ne vois plus quoi essayé, auriez-vous une idée.

Merci

**yann123456** · 02/06/2009, 15h11

J'ai codé une page qui fait ressortir mon problème. Si quelqu'un a le temps de la monter sur sa machine, ce serait cool, car je n'y comprends plus rien ou du moins je ne comprends pas les réactions.

La page html avec le js:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test ajax</title>
 
<script type="text/javascript">
 
function valider_form(){
 
  var data = null;
  data = "prix_mini="+document.forms['rechercher'].elements['prix_mini'].value+"&prix_maxi="+document.forms['rechercher'].elements['prix_maxi'].value;
 
  var xhr_object = null;
  var lemessage = "oups";
 
   if(window.XMLHttpRequest) // Firefox
      xhr_object = new XMLHttpRequest();
   else if(window.ActiveXObject) // Internet Explorer
      xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      return;
   }
 
   xhr_object.open("POST", "form.php", true);
 
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4) {
		 eval(xhr_object.responseText);
 
		 if(lemessage == "ok") {
			return true;
		  }
		  else {
			alert("le message contient:"+lemessage);
			return false;
		  }		 
	  }
   }
 
  xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr_object.send(data);
}
 
</script>
</head>
 
<body>
 
<form method="post" action="" onsubmit="return valider_form()" name="rechercher" id="rechercher" class="form">
  <fieldset>
  <legend>Affiner votre recherche</legend> <!-- Titre du fieldset -->      
 
      <label for="prix_mini">Prix mini: </label>
      <input name="prix_mini" id="prix_mini" class="champ_input2" type="text" value="<?php echo $_SESSION['prix_mini'];?>" size="7" maxlength="5" />
      <label for="prix_maxi">maxi: </label>
      <input name="prix_maxi" id="prix_maxi" class="champ_input2" type="text" value="<?php echo $_SESSION['prix_maxi'];?>" size="7" maxlength="5" />
 
      <input type="Image" class="bt_formulaire" alt="Valider le formulaire" src="images/bt_ok.jpg" />
 
  </fieldset>
</form>
 
</body>
</html>

Le php (chezmoi form.php)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
header('Content-type: text/html; charset=charset=utf-8');
 
if ($_POST["prix_mini"]>$_POST["prix_maxi"])
{
        echo 'var lemessage="Prix mini doit etre inferieur a prix maxi";';
}
else
{
        echo 'var lemessage="ok";';
}
?>

J'utilise firebug pour essayer de debugger mon script.

1°) Tout d'abord l'alerte s'affiche avant que form.php soit fini d'exécuter. Je voie cela dans firebug, dans console, l'url du script php s'affiche avec l'espéce de roue qui tourne a coté pour dire qu'il traite le fichier. la roue tourne encore alors que l'alert est déjà affiché.

2°) la "roue" tourne toujours, j'ai l'impression qu'il ne fini jamais de traiter ce fichier.

Auriez-vous des pistes

**emmanuel.remy** · 02/06/2009, 15h49

Salut,

Tu fais plusieurs erreurs:

le onsubmit="return valider_form()": valider_form appelle ta requête AJAX asynchrone, donc avant le retour de celle-ci ta fonction valider_form a fini de s'exécuter Tu ne peux pas appeler ton script Ajax sur le onsubmit aussi basiquement. Appelle le plutôt sur le onclick d'un bouton et si c'est OK, appelle alors le submit de ton formulaire

Plus génant:

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
  var lemessage = "oups";
 
 ...
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4) {
		 eval(xhr_object.responseText);
 
		 if(lemessage == "ok") {
			return true;
		  }
		  else {
			alert("le message contient:"+lemessage);
			return false;
		  }		 
	  }
   }

La fonction appliquée à onreadystatechange est une fonction anonyme. Sans rentrer dans les détails, ta variable lemessage dans la fonction est déjà évaluée LORS DE LA CREATION de la fonction et fait référence à la variable globale lemessage . Donc ensuite toute affectation par le eval est hors contexte (var lemessage=...). Le code que tu aurais dû écrire devrait plutôt ressembler à (hors problème de ton submit):

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
 
...
  //var lemessage = "oups";
...	
   xhr_object.open("POST", "form.php", true);
	
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4) {
		 //ICI la variable lemessage
		 //et pas d'eval si on peut s'en passer
		 var lemessage= xhr_object.responseText;
		 if(lemessage == "ok") {
			//return true;
		  }
		  else {
			alert("le message contient:"+lemessage);
			//return false;
		  }		 
	  }
   }


//avec  form.php
<?php
if ($_POST["prix_mini"]>$_POST["prix_maxi"])
{
	echo "Prix mini doit etre inferieur a prix maxi";
}
else
{
	echo "ok"
}
?>

Tu noteras que j'ai aussi mis en commentaire les return car je suppose que tu penses qu'ils s'appliquent à la fonction valider_form alors qu'ils s'appliquent à la fonction anonyme en cours (onreadystatechange ).

ERE

[AJAX] Fonction qui exécute la validation d'un formulaire

AJAX

Discussions similaires

Partager

Partager