IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Blocage formulaire ajax


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Juin 2011
    Messages : 70
    Par défaut [AJAX] Blocage formulaire ajax
    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!

  2. #2
    Inactif  

    Homme Profil pro
    développeur Vala
    Inscrit en
    Février 2011
    Messages
    478
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : développeur Vala
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2011
    Messages : 478
    Par défaut
    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>

  3. #3
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Juin 2011
    Messages : 70
    Par défaut
    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.

  4. #4
    Membre chevronné Avatar de hariman
    Homme Profil pro
    Développeur Java, Android
    Inscrit en
    Janvier 2008
    Messages
    200
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations professionnelles :
    Activité : Développeur Java, Android
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2008
    Messages : 200
    Par défaut
    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();">

  5. #5
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Juin 2011
    Messages : 70
    Par défaut
    Bonjour

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

  6. #6
    Membre chevronné Avatar de hariman
    Homme Profil pro
    Développeur Java, Android
    Inscrit en
    Janvier 2008
    Messages
    200
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations professionnelles :
    Activité : Développeur Java, Android
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2008
    Messages : 200
    Par défaut
    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;

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par 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();">
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2011
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Juin 2011
    Messages : 70
    Par défaut
    Citation Envoyé par Bovino Voir le message
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Validation formulaire ajax
    Par zekabyle dans le forum AJAX
    Réponses: 1
    Dernier message: 18/02/2011, 17h23
  2. [AJAX] Exemple Formulaire AJAX
    Par Invité dans le forum AJAX
    Réponses: 4
    Dernier message: 10/09/2010, 10h00
  3. [AJAX] Submit Formulaire
    Par Azanael dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 29/07/2008, 12h31
  4. [AJAX] Ajax et formulaire
    Par Mimi Bulles dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 13/05/2006, 15h17
  5. [AJAX] Ajax et formulaire
    Par Mimi Bulles dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 13/05/2006, 12h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo