Blocage formulaire ajax [Résolu]

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

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 :

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!

[rotrevrep]

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>

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

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;

[flozza]

soit la balise form comme ceci:

Code html :

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

le bouton submit:

Code html :

1
2
 
<input id="soumettre" type="submit" value="test" />

et le switch dans cette forme:

Code javascript :

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.

[Bovino]

Envoyé par hariman

Bonjour,

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

Code :

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.

[hariman]

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()" />
  ...

[flozza]

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.

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

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

[flozza]

Solution trouvée, merci Hariman, c'était bien une erreur de ma part.

Bilan

Une balise form comme ceci:

Code html :

1
2
 
<form method="post" id="login" name="login">

Un bouton:

Code html :

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!

[flozza]

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

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

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