Discussion :

[mOscar007]

Bonjour,

J'ai un petit souci qui me bloque dans mon code ajax. En effet, j'ai un formulaire de connexion dans une popup, j'aimerais quand je le valide qu'il me renvoie vers un autre formulaire sans recharger la page (étape suivante popup). Tout ça marche parfait mais mon problème c'est quand un utilisateur saisit une adresse mail qui n'est pas valide pour se connecter, j'aimerais rester sur la même popup et lui afficher le message d'erreur. Mais dès que je saisisse un émail invalide ça me renvoie vers l'autre popup et en plus m'affiche le message d'erreur.

Ci-dessous le code :

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
15
16
 
<div class="popup">
       <div id="status1"></div>
        // Formulaire connexion
        <form method="post" action="action1.php" id="myform1">
               <input type="text" name="email" id="email">
               <input type="submit" value="Valider">
        </form>
 
       <div id="status2"></div>
        // Formulaire 
       <form method="post" action="action2.php" id="myform2">
              <input type="text" name="titre" id="titre">
              <input type="submit" name="valider" value="Valider">
       </form>
</div>

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
 
// Ajax : traitement formulaire connexion
$(document).ready(function() {
    $('#myform1').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this); 
        // on sécurise les données
        var email = encodeURIComponent($('#email').val());
 
        if(email === '') {
            $('#status1').html('<p class="error">Champ invalide  !</p>');
        } else {
            $.ajax({
                url: 'action1.php',
                type: 'post',
                data: $this.serialize(),
                dataType: 'json',
                success: function(data){
                    var myVar = data.split(';')[0];
 
                    if (myVar !== '') {
                        $('#status2').html(myVar);
                        $('#myform2').show();
                        $('#myform1').hide();
                    } 
                }
            });
              return false;
        }
    });
});

Code php :

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
 
<?php
// PHP
session_start();
 
    header('Content: application/json', 1);
 
    include('db.php');
 
    // Traitement connexion
    if (isset($_POST['valider'])) {
        if (isset($_POST['email'])) {
            $email = $_POST['email'];
 
            $q = array('email'=>$email);
            $sql = "SELECT count(*) AS nbr, email FROM users WHERE email = :email GROUP BY email";
            $req = $db->prepare($sql);
            $req->execute($q) or die(print_r($db->errorInfo()));
            $data = $req->fetch(PDO::FETCH_ASSOC);
 
            if($data['nbr'] == 1) {
                    $_SESSION['auth'] = 'ok';
 
                    $_SESSION['id'] = $data ['id'];
 
                    $_SESSION['email'] = $email;
 
                    echo '<p class="success">Vous avez été connecté avec succès.</p>;';
 
                    $returnVal = array('myVar', $_SESSION['id']);
                    echo json_encode($returnVal);
                    exit(0);
            } else {
                echo '<p class="error">Erreur lors de la connexion, veuillez vérifier votre adresse mail !</p>';
            }
        } else {
            echo '<p class="error">Vous avez oublié de remplir le champ !</p>';
        }
    }
?>

J'aimerais faire en sorte que quand je valide mon formulaire avec une fausse adresse mail d'afficher une message d'erreur et de rester sur la même popup de connexion. En cas de success avec une bonne adresse, passer directement au formulaire suivant et afficher le message de succès. J'ai regardé sur la FAQ et sur les autres forums mais R.A.S.

Merci par avance !

[Toufik83]

essaie de faire une fonction (que tu définies au préalable) et tu l'appelle dans le success de $.ajax, avec un paramètre X, dont X prends la valeur de data.
javascript continue d’exécuter les instructions dans la fonction success sans attendre le data. c'est pour ça que le 1er popup se cache et le 2éme s'affiche.

Code :

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

1
2
3
 
$('#myform2').show();
$('#myform1').hide();