Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

144
Views
Changing the display style of a div after executing a header location

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!