[AJAX] Blocage formulaire ajax

Version imprimable

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:

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:

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

bonjour :).
et de cette manière ? :

Code:

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>

02/01/2012, 13h10
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.
02/01/2012, 13h18
hariman
Bonjour,

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

1 2 <form method="post" action="javascript:return logMe();">
02/01/2012, 13h23
flozza

Bonjour

En ajoutant cette attribut je n'obtient aucune réponse ou réaction.
02/01/2012, 13h36
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;
02/01/2012, 13h47
flozza
soit la balise form comme ceci:
Code:

1 2 <form method="post" id="login" name="login" action="javascript:return logMe();">
le bouton submit:
Code:

1 2 <input id="soumettre" type="submit" value="test" />
et le switch dans cette forme:
Code:

1 2 3 4 5 6 7 case "2": document.getElementById("login").submit() case "3": content.innerHTML = 'Mot de passe invalide'; break;
ne renvoie encore pas de réponse.
J'ai essayé avec un input d'attribut "button" avec un onclick="logMe(this.form)", et la fonction this.form(f), accompagné d'un f.submit(); en case 2 du switch mais rien non plus.
02/01/2012, 13h59
Bovino
Citation:
Envoyé par hariman

Bonjour,

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

Code:

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

Citation:

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.

Et il n'y a pas d'erreur dans la console javascript ? car tu as oublié quelque chose sur :
Code:

1 2 3 4 case "2": document.getElementById("login").submit(); // ou document.login.submit(); break;
Désolé, j'avais oublié de préciser quelque chose sur l'appel de logMe() :
Code:

1 2 3 4 5 <form method="post" id="login"> ... <input type="button" value="test" onclick="logMe()" /> ...

02/01/2012, 14h10
flozza

Citation:

Envoyé par Bovino

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.
02/01/2012, 14h20
Bovino
Il faut que tu utilises un mix des différentes solutions proposées.
* Dans ton formulaire, garde le bouton submit (pour que le formulaire puisse fonctionner même si JavaScript n'est pas disponible).
* Dans l'attribut action, met une URL alternative pour obtenir un résultat similaire mais sans AJAX (donc avec rechargement de la page).
* Dans le onsubmit, appelle ta fonction AJAX avec un return false : si JavaScript est activé, l'action par défaut du bouton submit sera désactivée

Code:

<form method="post" action="url/alternative" onsubmit="logMe(); return false;">

* Dans le callback AJAX, dans le switch, supprime tous les return (qui ne servent à rien) et contente toi d'afficher le message d'erreur, si la confirmation est correcte, alors déclenche le submit
Code:

1 2 3 case "2": document.getElementById("login").submit(); break;
un submit déclenché par programmation ne lance pas l'événement onsubmit.
Eventuellement, tu peux au préalable modifier l'attribut action du formulaire.
02/01/2012, 14h21
flozza
Solution trouvée, merci Hariman, c'était bien une erreur de ma part.

Bilan

Une balise form comme ceci:
Code:

1 2 <form method="post" id="login" name="login">
Un bouton:
Code:

1 2 <input type="button" value="" onclick="logMe(this.form);" />
Et une fonction logMe(f)
avec break; si pas bon, et f.submit(); si ok.
Si ça peut servir à quelqu'un d'autre.

Merci à tous pour votre aide! :ccool:
02/01/2012, 14h27
flozza
Citation:
Envoyé par Bovino

Il faut que tu utilises un mix des différentes solutions proposées.
* Dans ton formulaire, garde le bouton submit (pour que le formulaire puisse fonctionner même si JavaScript n'est pas disponible).
* Dans l'attribut action, met une URL alternative pour obtenir un résultat similaire mais sans AJAX (donc avec rechargement de la page).
* Dans le onsubmit, appelle ta fonction AJAX avec un return false : si JavaScript est activé, l'action par défaut du bouton submit sera désactivée

Code:

<form method="post" action="url/alternative" onsubmit="logMe(); return false;">

* Dans le callback AJAX, dans le switch, supprime tous les return (qui ne servent à rien) et contente toi d'afficher le message d'erreur, si la confirmation est correcte, alors déclenche le submit

Code:

1 2 3 case "2": document.getElementById("login").submit(); break;

un submit déclenché par programmation ne lance pas l'événement onsubmit.
Eventuellement, tu peux au préalable modifier l'attribut action du formulaire.
Si l'utilisateur n'a pas javascript activé, il se prendra un gros div rouge qui couvre toute la page. S'il ne veut pas l'activer, il peux aller voir ailleurs. On est en 2012 quand même. Ce site n'est pas intéressant sans JS, mais pour d'autres sites cette astuce m'aidera. Merci pour ton aide ;)