Irma Elita Irma Elita - 5 months ago 29
Javascript Question

How to show div in if block in php

I have index.php, in index.php there is a login form with session. If username and password are correct, it would go to home.php. But if username or password is incorrect I want to show div above login form that contains an error message like this Error Message.

I want this warning div is hidden and it will be shown only if username or password is incorrect. I've tried some other solution but none of them work, first If I put div in else condition, it will appear above login form no matter what the condition are. Second, if I put javascript to change style display = block, it won't appear in index page. Please help me to solve this problem. Thanks.

Index.php

<?php
session_start();
if(isset($_POST['login']))
{
$user = $_POST['user'];
$pass = $_POST['pass'];
if($user == "admin" && $pass == "admin")
{
$_SESSION['user']=$user;
?>
<script language="javascript">window.location.href='home.php' </script>
<?php
} else {
//What should I do here?
?>
<script language="javascript">document.getElementById("warning").style.display = "block" </script>
<?php
}
}
?>

<!-- Warning that I want to show if username or password is incorrect -->
<div id="warning" class="w3-container w3-red w3-text-white w3-card-2 w3-animate-opacity" style="position: relative;margin-top: 20px;display:none">
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
<strong>Warning!</strong> Incorrect Username or Password!
</div>
<!-- Login form -->
<form class="w3-container" action="" method="post">
</form>


[EDIT]

I finally solved the problem by following Sharky's suggesstion to put php code below warning div. In else case I'm still using javascript that will change style display of warning div to block. Thanks for all your help :)

Answer

The reason why your div is not showing, is because your javascript which sets the display:block; is being executed BEFORE that div is generated in your markup.

Simple scenario (which fails):

    <html>
        <head>
            <script language="javascript">
                document.getElementById("warning").style.display = "block";
            </script>
        </head>
        <body>
            <div id="warning" style="display:none;">hello</div>
        </body>
    </html> 

this will result to Uncaught TypeError: Cannot read property 'style' of null because the moment javascript tries to get the element with id warning there is only this markup "existing" in the browser:

<html>
    <head>
        <script language="javascript">
            document.getElementById("warning").style.display = "block";
        </script>

do you see any div with id warning on the above markup? no, there isn't any div at all. in fact there is no <body> yet!

So in order for this to work, your javascript must go after that div. put it at the bottom just before the </body>. See the following, which works:

    <html>
        <head>
        </head>
        <body>
            <div id="warning" style="display:none;">hello</div>
            <script language="javascript">
                document.getElementById("warning").style.display = "block" 
            </script>
        </body>
    </html>

Now, about your code: if you do not want to move that big block of if you can just set a flag variable like

$need_to_show_warning = false;
if($user == "admin" && $pass == "admin") 
{                                      
    $_SESSION['user']=$user;
?>
<script language="javascript">window.location.href='home.php' </script>
<?php
} else {
//What should I do here?                
$need_to_show_warning = true;
}

then, AFTER your div:

    <!-- Warning that I want to show if username or password is incorrect -->
    <div id="warning" class="w3-container w3-red w3-text-white w3-card-2 w3-animate-opacity" style="position: relative;margin-top: 20px;display:none">
        <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
        <strong>Warning!</strong> Incorrect Username or Password!
    </div>
<?php 
    if($need_to_show_warning)
    {
?>
<script language="javascript">document.getElementById("warning").style.display = "block"; </script>
<?php
    }
Comments