PHP Show Hidden Div

Question

this is my code:

<?php
require_once("include/membersite_config.php");
if(isset($_POST['submitted']))
{
if($fgmembersite->Login())
{
$fgmembersite->RedirectToURL("login-home.php");
}
}
?>

<script>
window.onload = function() {
function validate(e) {
var username = document.getElementById('username');
if (username.value.trim() == '') {
username.style.backgroundColor = '#ff4c4c';
e.preventDefault();
} else {
username.style.backgroundColor = null;
}
var password = document.getElementById('password');
if (password.value.trim() == '') {
password.style.backgroundColor = '#ff4c4c';
e.preventDefault();
}else {
password.style.backgroundColor = null;
}
}
document.getElementById('login').addEventListener('submit', validate);
}
</script>

<div id="navrow">
<img style="float: left;" src="questerslogoresized.png" />
<ul>
<li>Register</li>&nbsp&nbsp&nbsp
<li>About</li>&nbsp&nbsp&nbsp
<li>Reviews</li>&nbsp&nbsp&nbsp
<form id='login'  action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>
<div style="position: absolute; right: 120px;">
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="20" />
<span id='login_username_errorloc' class='error'></span>
<input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
<span id='login_password_errorloc' class='error'></span>
</div>
<input type='submit' name='Submit' value='Submit' />
<!--<div class='short_explanation'><a href='reset-pwd-req.php'>Forgot Password?</a></div>-->
<div><span style='color: #fff; position: absolute; top: 55px; right: 398px;'><?php echo $fgmembersite->GetErrorMessage(); ?></span></div>
</div>
</form>
</ul>

<div id="passwordpopup" style="display: none;">
<div id="popup">
<h1>HI THERE!</h1>
</div>
</div>

This is my CSS:

#popup {
 width: 175px;
 height: 100px;
 color: red;
 background: green;
 position: absolute;
 top: 15px; 
}

.formlogin {
 border-radius: 12px 12px 12px 12px;
 height: 24px;
 /*width: 200px;*/
 padding: 5px;
 border-style: solid;
 border-color: #0093cc;
 -webkit-transition: border-color 1s ease;
 -moz-transition: border-color 1s ease;
 -o-transition: border-color 1s ease;
 -ms-transition: border-color 1s ease;
 transition: border-color 1s ease;
 display: inline-block;
 font-size: 16px; 
 width: 12.5em;
 position: relative;
 top: -2em;
}

Finally, here's my PHP:

if(!$this->CheckLoginInDB($username,$password))
        {
            echo '<style type="text/css">
        #navrow {
            height: 70px;
        }
        </style>';
        $this->HandleError("Incorrect username or password.");
            return false;
        }

        $_SESSION[$this->GetLoginSessionVar()] = $username;

        return true;
    }

I'm wondering how I can get the hidden div passwordpopup to appear (not be hidden) in my PHP statement, in the section where $this->HandleError("Incorrect username or password."); is.

Hopefully you can help. Thanks again Stackoverflow!

Answer 1

Well basically you need to do the test for whether the user is logged in correctly before you decide to make the div hidden or not.

<?php
   $viz = $this->CheckLoginInDB($username,$password) 
              ? ''
              : 'style="display: none;"' ;
?>
    <div id="passwordpopup" <?php echo $viz; ?>>
        <div id="popup">
            <h1>HI THERE!</h1>
        </div>
    </div>

Or something like this. The flow of your code and availablility of $this is not obvious from your example.

Answer 2

Just override the inline style with !important:

#passwordpopup[style]{
display:block !important;
}

Or in your PHP:

echo '<style type="text/css">#navrow {height: 70px;} #passwordpopup[style]{display:block !important;}</style>';