Erreur Modale ne s'ouvre qu'une fois

**clickandgo** · 13/07/2021, 11h50

Bonjour à tous,

Je dispose d'un formulaire de login modal qui s'ouvre lors d'un click sur un lien de barre de navigation, le problème étant qu'il ne veut pas s'ouvrir une seconde fois une fois exécuté le code php.
J'ai beau faire un ctrl + F9 dans les différents navigateurs sitôt on clique sur le bouton de submit du modal le link contenu pourtant dans une navbar qui n'a rien à voir avec le modal en lui même n'est plus clickable ...

(si par contre je ferme le modal sans exécuter le traitement coté serveur le link est toujours clickable et réactif ...)

Merci d'avance pour vos lumières...

loginform.php

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php
//Initialisation variables en cas d'erreur pour retour dans champs du formulaire
$errorUserName = "";
$errorUserPassword = "";
?>
 
<div id="loginFormModal" class="modal">
 
    <form class="modal-content animate" action="" method="post">
        <div class="imgcontainer">
            <span onclick="document.getElementById('loginFormModal').style.display='none'" class="close" title="Fermer ce formulaire">&times;</span>
            <img src="" alt="" class="">
        </div>
 
        <div class="container">
            <label for="userName"><b> Nom d'utilisateur</b></label>
            <input type="text" placeholder="Votre Pseudo ou votre nom d'utilisateur" name="userName" required>
            <div class="errorUserName">
                <p><?= $errorUserName ?></p>
            </div>
 
            <label for="psw"><b>Mot de passe</b></label>
            <input type="password" placeholder="Votre mot de passe" name="userPassword" required>
            <div class="errorUserPassword">
                <p><?= $errorUserPassword ?></p>
            </div>
 
            <button type="submit">Se connecter</button>
            <label>
                <input type="checkbox" checked="checked" name="remember"> Se rapeller de moi
            </label>
            <p>Pas encore inscrit ? <a href="submitForm.php">Cliquez ici</a></p>
        </div>
 
        <div class="container" style="background-color:#f1f1f1">
            <button type="button" onclick="document.getElementById('loginFormModal').style.display='none'" class="cancelbtn">Annuler et fermer</button>
            <span class="psw">Mot de passe perdu? <a href="#">Cliquez ici</a></span>
        </div>
    </form>
</div>
 
<?php
 
//Vérification existence de l'utilisateur dans la table users
 
if (isset($_POST['userName']) && !empty($_POST['userName'])) {
    $userName = $_POST['userName'];
 
    echo $userName;
    $this->User->userNameCheck($userName);
 
    //Si l'utilisateur est reconnu comme existant alors on continue avec la vérification du couple user/password
    if ($retour['ServerResponse'] == "userExists") {
 
        //Vérification du mot de passe de l'utilisateur en cours
        if (
            isset($_POST['userName']) && !empty($_POST['userName'])
            && isset($_POST['userPassword']) && !empty($_POST['userPassword'])
        ) {
            $userPassword = $_POST['userPassword'];
            echo $userName . ' ' . $userPassword;
            $this->User->userPasswordCheck($userName, $userPassword);
        }
    }
}
 
?>
 
<script>
    //Fermer le formulaire modal de login si click en dehors de la fenêtre
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

header.php (contenant le link dans la navbar)

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
33
34
35
36
<body>
    <div class="wrapper">
        <header>
 
            <nav class="nav_checkbox">
                <a href="#" class="logo">
                    <h2>PetsBook</h2>
                </a>
                <input type="checkbox" id="nav-tab" class="nav-tab">
                <label for="nav-tab" class="label">
                    <div class="burger"></div>
                    <div class="burger"></div>
                    <div class="burger"></div>
                </label>
                <ul class="content_nav">
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Encyclopédie</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="loginModalLink"><a href="#" id="loginModalLink">Se connecter</a></li>
                </ul>
            </nav>
 
        </header>
 
        <?php require_once './includes/loginForm.php'; ?>
        <script>
            // Bouton qui ouvre le modal du formulaire de login
            var btn = document.getElementById("loginModalLink");
            // Get the modal
            var modal = document.getElementById('loginFormModal');
            // When the user clicks the button, open the modal 
            btn.onclick = function() {
                modal.style.display = "block";
            }
        </script>

**SpaceFrog** · 13/07/2021, 13h39

Je n'ai pas trop bien compris comment ton formulaire arrivait dans ta page, mais je soupçonne que ce soit parce que l'event onclik ne survit pas au rafraichissement de page induit pas la soumission du form

Code :

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

1
2
3
  btn.onclick = function() {
                modal.style.display = "block";
            }

**clickandgo** · 13/07/2021, 19h30

Et du coup on fait quoi ?

**SpaceFrog** · 15/07/2021, 10h14

réattribue le onclick après le rechargement...
ou revoit ton ergonomie générale, comme par exemple voir la modale dans la page au départ sans avoir à la charger

**clickandgo** · 15/07/2021, 13h03

Bonjour SpaceFrog

Après des heures de test la solution était plus que simple aucun script nécessaire, il suffisait d'inclure dans le 'onclick' des links en question :

Code html :

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

1
2
3
4
5
6
7
8
<ul class="content_nav">
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Encyclopédie</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="loginModalLink"><a class="loginModalLink" href="#" id="loginModalLink" onclick="document.getElementById('loginFormModal').style.display='block';">Se connecter</a></li>
                    <li class="registrationModalLink"><a class="registrationModalLink" href="#" id="registrationModalLink" onclick="document.getElementById('registrationFormModal').style.display='block';">S'inscrire</a></li>
                </ul>