Discussion :

[flozza]

Bonjour a tous

J'implore votre aide pour un problème que j'ai sur un formulaire d'identification.

Jusque là, sans ajax, un simple onsubmit="return ..." fonctionnait, mais avec ajax je me rend compte que ce n'est plus possible..

Donc un formulaire tout bête pseudo/pass:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="compte">
<form method="post" name="login" onsubmit="return logMe();">
 
Pseudo <input size="15" maxlength="40" class="login" type="text" id="inputLoginNick" name="inputLoginNick" value="" /> 
 
Mot d'passe <input size="15" maxlength="30" class="login" type="password" name="inputLoginPwd" id="inputLoginPwd" value="" />
 
<span id="logResult"></span>
 
<input type="submit" value="Envoyer" />
 
</form>
</div>

Et la fonction js:

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
 
function logMe() {
 
	var content = document.getElementById("logResult");
	var pseudo = document.login.elements["inputLoginNick"].value;
	var mdp = document.login.elements["inputLoginPwd"].value;
        var data = 'pseudo='+pseudo+'&mdp='+mdp+'&action=login';
 
        xhrObj.open("POST", "noreload.php", false);
        xhrObj.onreadystatechange = function() {
        if (xhrObj.readyState == 4 && xhrObj.status == 200) {
	   switch(xhrObj.responseText) {
		case "1":
			content.innerHTML = 'Compte non activé';
			return false;
 
		case "2":
			return true;
 
		case "3": 
			content.innerHTML = 'Mot de passe invalide';
		        return false;
 
		case "4":
			content.innerHTML = 'Compte inexistant';
			return false;
 
		case "5":
			content.innerHTML = 'Entrez votre pseudonyme';
			return false;
 
		case "6":
			content.innerHTML = 'Entrez votre mot de passe';
		        return false;
 
		case "7":
			content.innerHTML = 'Entrez vos identifiants';
			return false;
 
		default:
			content.innerHTML = 'Erreur! Signalez ce bug!';
			return false;
	    }
       }
   };
   xhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   xhrObj.send(data);
};

La réponse reviens bien, et s'inscrit dans le span, seulement elle n'y reste pas, car le formulaire est quand même envoyé malgré le return false...

A l'aide!

[Rachel]

bonjour .
et de cette manière ? :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="compte">
<form method="post" name="login">
 
Pseudo <input size="15" maxlength="40" class="login" type="text" id="inputLoginNick" name="inputLoginNick" value="" /> 
 
Mot de passe <input size="15" maxlength="30" class="login" type="password" name="inputLoginPwd" id="inputLoginPwd" value="" />
 
<span id="logResult"></span>
 
<input type="button" value="Envoyer" onclick="logMe();" />
 
</form>
</div>

[flozza]

Bonjour

Forcément, ça n'envoie pas le formulaire. Mais si les identifiants et mot de passe sont bons, ça ne l'envoie pas non plus. J'ai essayé de rajouter un document.login.submit(); à la case 2, mais ça ne fonctionne pas.

[hariman]

Bonjour,

Utilise plutôt l'attribut "action" de la balise "form" au lieu de "onsubmit"

Code :

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

1
2
 
<form method="post" action="javascript:return logMe();">

[flozza]

Bonjour

En ajoutant cette attribut je n'obtient aucune réponse ou réaction.

[hariman]

Les return que tu as mis dans le bloc switch ne sont pas des instructions pour la fonction logMe(), ie logMe() ne renvoie rien. C'est la fonction anonyme que tu as affecté à xhrObj.onreadystatechange qui renvoie ces valeurs.

Donc, au lieu de faire "return true", appelle document.getElementById("formulaire").submit()

Les "return false" sont inutiles, on peut les remplacer par break;

[Bovino]

Bonjour,

Utilise plutôt l'attribut "action" de la balise "form" au lieu de "onsubmit"

Code :

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

1
2
 
<form method="post" action="javascript:return logMe();">

Non, ce n'est pas une bonne pratique !
Déjà, parce que ce n'est utile que pour ceux qui ont JavaScript activé (voir l'amélioration progressive), mais aussi parce que comme ça tu ne peux plus soumettre le formulaire...
D'autre part, le return ne sert toujours à rien à cause de l'appel asynchrone d'AJAX, la valeur retournée ne correspondant pas à celle attendue.

EDIT

le formulaire est quand même envoyé malgré le return false...

Normal, c'est le callback qui renvoie false à la fonction gérant l'appel AJAX, pas la fonction créée par le onsubmit.

[flozza]

D'autre part, le return ne sert toujours à rien à cause de l'appel asynchrone d'AJAX, la valeur retournée ne correspondant pas à celle attendue.

EDIT

Normal, c'est le callback qui renvoie false à la fonction gérant l'appel AJAX, pas la fonction créée par le onsubmit.

Bonjour bovino. Et comment je pourrais remédier à ce problème ?

@Hariman
Non j'ai essayé mais je n'ai toujours aucune réponse.

J'ai cru lire des choses sur un event.stopPropagation et window.cancelBubble, mais j'ai du mal à comprendre comment les utiliser, je ne suis pas sur que ce soit bien ce que je cherche.