So basically I have an SignUp and LogIn form that is popup and activatable by an button to popup. Code Below
LogIn
<!-- Popup LogIn -->
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="images/udm_logo.png" height="95px">
<form action="includes/login.php" method="post">
<p class="tag-name">Email</p>
<input type="email" class="login" name="email">
<p class="tag-name">Password</p>
<input type="password" class="login" name="password">
<button id="btnLogin" name="login">LogIn</button>
</form>
<button id="btnSignup">SignUp</button>
<?php include 'js/errors.php'; ?>
</div>
</div>
LogIn CSS
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
LogIn Javascript
const bgmodal = document.querySelector('.bg-modal');
const modalBtn = document.getElementById('login');
modalBtn.addEventListener('click', function() {
bgmodal.style.display = 'flex';
body.classList.toggle('overflow-hidden');
});
After clicking the <button id="btnLogin" name="login">LogIn</button> it will execute a php code that will check if the user input is correct or not
LogIn PHP
<?php
if (isset($_POST["login"])) {
$email = $_POST["email"];
$pwd = $_POST["password"];
require_once 'connection.php';
require_once 'function.php';
if (emptyInputLogin($email, $pwd) !== false) {
header("location: ../index.php?error=emptyinput");
exit();
}
loginUser($connection, $email, $pwd);
}else {
header("location: ../index.phpentered");
exit();
}
This is where my problem starts. After executing the php code it executes the header and directs to the page that I defined. But the Popup LogIn disappears after loading the page making it ugly when posting the user error. I would like to know if there's better execution that the Popup Login won't disappear after loading the header function.
So what I did is on my error.php which is used to handle the different queryStrings Code below.
<?php
if (isset($_GET["error"])) {
if ($_GET["error"] == "emptyinput") {
echo "<p class='error'>Fill in all fields</p>";
}
I added a script tag which will handle the different commands to stay flex the display style of the popup modal after refreshing the page. Final Code below
<?php
if (isset($_GET["error"])) {
if ($_GET["error"] == "emptyinput") {
echo "<script>
const bgmodalphp = document.querySelector('.bg-modal');
const modalcont_signup_php = document.querySelector('.modal-content-signup');
if (bgmodalphp){
bgmodalphp.style.display = 'flex';
body.classList.toggle('overflow-hidden');
};";
echo '</script>';
echo "<p class='error'>Fill in all fields</p>";
Thanks to @dov-rine and @waseel-ahmad-mufti for the idea.