Code Javascript qui ne fonctionne pas d'une page à l'autre

Version imprimable

Bonjour,

J'utilise un script en PHP pour vérifier les champs du formulaire d'inscription de mon site. Ce même script est utilisé en temps réel avec de l'ajax mais aussi à l'envoie du formulaire au serveur via le bouton submit.

Le script PHP s'appel VerifFormulaire.php

Pour chaque vérification j'ai cette condition :
Code:

1 2 3 4 5 6 7 8 9 10 if(isset($_POST['submit'])){ // Si le formulaire a été envoyé on affiche le message d'erreur en PHP echo '<script type="textjavascript"> document.forms[\'FormulaireInscription\'].pseudo.className = \'ChampConnexionRefuse\'; document.getElementById(\'ConfirmPseudo\').innerHTML = \'<span class="ErreurInscription"> Vous n\'avez pas renseigné de pseudo.</span>\'; </script>'; return false; } else{ // Si le formulaire est vérifié en AJAX on utilise le switch en JS pour affiché le message d'erreur echo "1"; }
Si la vérification se fait en ajax sur la page ajax.js j'ai un switch qui affiche le message d'erreur en conséquence.
Code:

1 2 3 4 case '1': document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse'; document.getElementById('ConfirmPseudo').innerHTML = '<span class="ErreurInscription"> Vous n\'avez pas renseigné de pseudo.</span>'; break;
Tout ce beau monde gravite dans la page inscription.php avec pour entête
Code:

1 2 require("script/php/VerifInscription.php"); <script type="text/javascript" src="script/javascript/ajax.js"></script>
En cas de vérification en ajax les messages d'erreurs s'affichent correctement.
Ce n'est pas le cas pour la vérification à l'envoie du formulaire...

J'ai testé un echo "Test"; à la place du message d'erreur sur la page VerifInscription.php et celui-ci s'affiche.
Preuve que c'est bien le code javascript qui pose problème, mais je ne vois pas pourquoi. :s

Merci de m'aider. ;)

27/02/2011, 18h35
Bovino

On ne sait pas comment les données (et lesquelles) sont transmises via AJAX ni comment est construit ton switch, ni comment est fait le formulaire en question...
Bref, difficile d'apporter un début de réponse à moins d'être adapte du vaudou... :aie:

Salut, merci de me répondre. ;)

J'ai volontairement pas mis tout mon code de peur d'en mettre trop :mrgreen:
Dans le cadre de la vérification du pseudo :

Formulaire simplifié :

Code:

1
2
3
4
<form method="POST" name="FormulaireInscription">
	<input type="text" name="pseudo" class="ChampConnexion" onBlur="PseudoInscription('POST','script/php/VerifInscription.php');" /><br />
	<input type="image" src="design/images/transparant.png" name="submit" id="submit" value="Send" />
</form>

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
function PseudoInscription(xhrMethod,xhrUrl){
	var xhr = requeteXHR(xhrMethod,xhrUrl);
	xhr.onreadystatechange = function(){
		if(xhr && xhr.readyState == 4){
			if(checkXHR(xhr)){
				var ct = xhr.getResponseHeader("content-type"),
				xml = ct && ct.indexOf("xml") >= 0,
				resultat = xml ? xhr.responseXML : xhr.responseText;
 
				switch (resultat){
					case '0':
						document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionAccepte';
						document.getElementById('ConfirmPseudo').innerHTML = '<span class="ValideInscription"> Votre pseudo est disponible.</span>'; 
					break;
					case  '1':
						document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
						document.getElementById('ConfirmPseudo').innerHTML = '<span class="ErreurInscription"> Vous n\'avez pas renseigné de pseudo.</span>';						
					break;
					case '2':
						document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
						document.getElementById('ConfirmPseudo').innerHTML = '<span class="ErreurInscription"> Seuls les caractères alphanumériques sont acceptés.</span>';
					break;
					case '3':
						document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
						document.getElementById('ConfirmPseudo').innerHTML = '<span class="ErreurInscription"> La taille du pseudo est limitée à 20 caractères.</span>';
					break;
					case '4':
						document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
						document.getElementById('ConfirmPseudo').innerHTML = '<span class="ErreurInscription"> Ce pseudo est déjà utilisé.</span>';						
					break;
				}
			}
		}
	}
	try{
		xhr.send("pseudo="+document.forms['FormulaireInscription'].pseudo.value);
	}
	catch(e){
	}
}

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
function VerifPseudo(){
	// Protection de la variable $_POST
	$_POST['pseudo'] = SecuVar($_POST['pseudo']);
	$RecherchePseudo = mysql_query("SELECT pseudo FROM membre WHERE pseudo = '".$_POST['pseudo']."'");
 
	if(empty($_POST['pseudo'])){ // Si le champ est vide
		if(isset($_POST['submit'])){ // Si le formulaire a été envoyé on affiche le message d'erreur en PHP
			echo '<script type="textjavascript">
			  document.forms[\'FormulaireInscription\'].pseudo.className = \'ChampConnexionRefuse\';
			  document.getElementById(\'ConfirmPseudo\').innerHTML = \'<span class="ErreurInscription"> Vous n\'avez pas renseigné de pseudo.</span>\';
			</script>';
			return false;
		}
		else{ // Si le formulaire est vérifié en AJAX on utilise le switch en JS pour affiché le message d'erreur
			echo "1";
		}
	}
	elseif(!preg_match("/^[A-Za-z0-9]+$/",$_POST['pseudo'])){ // Si le pseudo ne contient pas que des caractères alphanumériques
		if(isset($_POST['submit'])){ // Si le formulaire a été envoyé on affiche le message d'erreur en PHP
			echo "<script language=\"JavaScript\">
						document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
						document.getElementById('ConfirmPseudo').innerHTML = '<span class='ErreurInscription'> Seuls les caractères alphanumériques sont acceptés.</span>';				
				</script>";
			return false;
		}
		else{ // Si le formulaire est vérifié en AJAX on utilise le switch en JS pour affiché le message d'erreur
			echo "2";
		}
	}
	elseif(strlen($_POST['pseudo']) > 20){ // Si le pseudo fait plus de 20 caractères
		if(isset($_POST['submit'])){ // Si le formulaire a été envoyé on affiche le message d'erreur en PHP
			echo "<script language=\"JavaScript\">
					document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
					document.getElementById('ConfirmPseudo').innerHTML = '<span class='ErreurInscription'> La taille du pseudo est limitée à 20 caractères.</span>';				
				</script>";
			return false;
		}
		else{ // Si le formulaire est vérifié en AJAX on utilise le switch en JS pour affiché le message d'erreur
			echo "3";
		}
	}
	elseif(mysql_num_rows($RecherchePseudo) >= 1){ // Si le pseudo est déjà dans la table memebre
		if(isset($_POST['submit'])){ // Si le formulaire a été envoyé on affiche le message d'erreur en PHP
			echo "<script language=\"JavaScript\">
					document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
					document.getElementById('ConfirmPseudo').innerHTML = '<span class='ErreurInscription'> Ce pseudo est déjà utilisé.</span>';					
				</script>";
			return false;
		}
		else{ // Si le formulaire est vérifié en AJAX on utilise le switch en JS pour affiché le message d'erreur
			echo "4";
		}
	}
	else{
		if(isset($_POST['submit'])){ // Si le formulaire a été envoyé on affiche le message d'erreur en PHP
			echo "<script language=\"JavaScript\">
					document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionAccepte';
					document.getElementById('ConfirmPseudo').innerHTML = '<span class='ValideInscription'> Votre pseudo est disponible.</span>';			
				</script>";
			return true;
		}
		else{ // Si le formulaire est vérifié en AJAX on utilise le switch en JS pour affiché le message d'erreur
			echo "0";
		}
	}
}
 
if(!isset($_POST['submit'])){ // Si il s'agit d'une vérification en AJAX 
	if(isset($_POST['pseudo'])){ VerifPseudo(); }
}

01/03/2011, 16h08
micetf

As-tu regardé le code source de ta page ?
Cela te permettra de voir si le javascript généré par PHP pour l'erreur que tu attends est correct ou non.
Fred
01/03/2011, 17h15
Bovino

C'est mes yeux ou ton formulaire n'a pas d'attribut action :?
Dans ce cas, pas étonnant que les données ne soient pas transmises :aie:
01/03/2011, 17h17
SpaceFrog

soumission ajax beef ...
01/03/2011, 17h19
Bovino

Citation:

Envoyé par Vict0

En cas de vérification en ajax les messages d'erreurs s'affichent correctement.
Ce n'est pas le cas pour la vérification à l'envoie du formulaire...

Ai-je besoin de souligner la seconde partie de la phrase ? :whistle:

:haha:
01/03/2011, 17h21
SpaceFrog

ha oki ^^
une verif sur le onblur ok ...
mais après un submit qui part dans le vide ^^
02/03/2011, 00h01
Vict0

Bonsoir,

Merci de m'avoir répondu.

Au sujet du action="", je n'y avais pas pensé, mais après coups, je me demande si c'est vraiment nécessaire vu que j'appel la page VerifInscription.php par la fonction require(); dans la page inscription.php.

D'autre part, si je remplace le message d'erreur en JS par un simple "Test" dans la fonction echo ça s'affiche comme prévu si le pseudo n'a pas été renseigné.
C'est bien le message en Javascript qui pose problème. ;)

micetf, j'ai "affiché le code source de la page" sous Google Chrome et la bizarrerie, le message test n'est pas présent dans le code HTML. 8O

Voilà, si jamais vous avez d'autres remarques, n'hésitez pas. ;)
03/03/2011, 16h53
Vict0

J'ai tenté d'afficher le code Javascript sans le echo en fermant la balise PHP, mais même constat...

Salut,

Ce matin, j'ai commencé a effectuer quelques tests.
Si je remplace
Code:

1 2 3 4 echo '<script type="textjavascript"> document.forms[\'FormulaireInscription\'].pseudo.className = \'ChampConnexionRefuse\'; document.getElementById(\'ConfirmPseudo\').innerHTML = \'<span class="ErreurInscription"> Vous n\'avez pas renseigné de pseudo.</span>\'; </script>';
par
Code:

1 2 3 echo "<script language=\"JavaScript\"> alert('test'); </script>";
Ca fonctionne.

Là j'ai eu le déclique, je n'utilise pas d'évènement en Javascript.

J'ai tenté :
Code:

1 2 3 4 5 echo "<script language=\"JavaScript\"> windows.onload function(){ document.getElementById('ConfirmPseudo').innerHTML = '<span class=\"ErreurInscription\"> Vous n'avez pas renseigné de pseudo.</span>'; }; </script>";
Mais ça ne fonctionne pas... :/
Peut-être je n'utilise pas le bon évènement, ou pas correctement...

05/03/2011, 18h49
Bovino

Code:

<script type="textjavascript">

:nono:

Code:

<script type="text/javascript">
05/03/2011, 20h36
Vict0

Après avoir posté j'ai corrigé l'erreur mais j'ai oublié d'éditer mon poste. :s
Malgré la correction, toujours le même problème.

Peut-être en remplaçant :

Code:

1
2
3
windows.onload function(){
	document.getElementById('ConfirmPseudo').innerHTML = '<span class=\"ErreurInscription\"> Vous n'avez pas renseigné de pseudo.</span>';
		};

par

Code:

1
2
3
window.onload = function(){
	document.getElementById('ConfirmPseudo').innerHTML = '<span class=\"ErreurInscription\"> Vous n'avez pas renseigné de pseudo.</span>';
		};

06/03/2011, 16h55
Vict0

Salut,

J'ai testé ton bout de code, mais ça ne fonctionne pas. :/

Merci quand même. ;) :ccool:

Un petit soucis dans le "vous n\'avez" qu'il faut écrire "vous n\\\'avez"

Code:

1
2
3
4
5
 
echo '<script type="textjavascript">
     document.forms[\'FormulaireInscription\'].pseudo.className = \'ChampConnexionRefuse\';
     document.getElementById(\'ConfirmPseudo\').innerHTML = \'<span class="ErreurInscription"> Vous n\\\'avez pas renseigné de pseudo.</span>\';
</script>';

sinon le echo renvoie :

Code:

1
2
3
 
document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
     document.getElementById('ConfirmPseudo').innerHTML = '<span class="ErreurInscription"> Vous n'avez pas renseigné de pseudo.</span>';

Javascript interpretre le n' comme la fin de la chaine.

c'est déjà ça
bonne chance

Salut,

Aucun changement.
J'ai testé en enlevant l'echo comme ceci :

Code:

1
2
3
4
5
6
7
 
?>
<script type="text/javascript">
	document.getElementById('ConfirmPseudo').innerHTML = '<span class=\"ErreurInscription\"> Vous n\'avez pas renseigné de pseudo.</span>';
	document.forms['FormulaireInscription'].pseudo.className = 'ChampConnexionRefuse';
</script>
<?php

Cependant, pas de changement...

06/03/2011, 21h02
Billy KiT

Re,

il faut quand même rajouter le window.onload = function () { ...

puisqu'a priori, ce code s'execute avant le chargement de l'objet

serait-ce bon cette fois ! :?
06/03/2011, 22h44
Vict0

Merci, merci, merci et merci ! Ca faisait trop longtemps que je n'arrivais pas à résoudre ce problème. :ccool: