Erreur Modale ne s'ouvre qu'une fois
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:
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">×</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:
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> |
