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

**Vict0** · 27/02/2011, 12h24

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 :

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

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 :

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

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 :

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

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** · 27/02/2011, 18h35

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** · 27/02/2011, 20h29

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 :

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

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 :

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

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
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** · 01/03/2011, 16h08

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** · 01/03/2011, 17h15

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** · 01/03/2011, 17h17

soumission ajax beef ...

**Bovino** · 01/03/2011, 17h19

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** · 01/03/2011, 17h21

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

**Vict0** · 02/03/2011, 00h01

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** · 03/03/2011, 16h53

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

**Vict0** · 05/03/2011, 12h23

Salut,

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

Code :

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

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 :

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

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 :

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

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** · 05/03/2011, 18h49

Code :

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

<script type="textjavascript">

Code :

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

<script type="text/javascript">

**Vict0** · 05/03/2011, 20h36

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** · 06/03/2011, 14h04

Peut-être en remplaçant :

Code :

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

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

par

Code :

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

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

**Vict0** · 06/03/2011, 16h55

Salut,

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

Merci quand même.

**Billy KiT** · 06/03/2011, 19h25

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

Code :

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

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 :

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

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** · 06/03/2011, 20h12

Salut,

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

Code :

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

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** · 06/03/2011, 21h02

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** · 06/03/2011, 22h44

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

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

JavaScript

Discussions similaires

Partager

Partager