Code Javascript qui ne fonctionne pas d'une page à l'autre [Résolu]

[Vict0]

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.

[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...

[Vict0]

Salut, merci de me répondre.

J'ai volontairement pas mis tout mon code de peur d'en mettre trop
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(); }
}

[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

[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

[SpaceFrog]

soumission ajax beef ...

[Bovino]

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 ?

[SpaceFrog]

ha oki ^^
une verif sur le onblur ok ...
mais après un submit qui part dans le vide ^^

[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.

Voilà, si jamais vous avez d'autres remarques, n'hésitez pas.

[Vict0]

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

[Vict0]

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...

[Bovino]

Code :

<script type="textjavascript">

Code :

<script type="text/javascript">

[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.

[Billy KiT]

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>';
		};

[Vict0]

Salut,

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

Merci quand même.

[Billy KiT]

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

[Vict0]

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...

[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 !

[Vict0]

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