Show popup when redirecting back to page
In all my pages, I have a text in the form of a button, which, if only clicked, will display the login form in a popup div. This popup div will automatically close if the page is reloaded by the user.
Now I have a function in my config.php file as a login config. And if the login failed, then at the bottom or at the bottom of the login form a notification will appear that "Login with an error".
The problem is that this login form will only be displayed if the user clicks the Login button on the page, so when it redirects back it doesn't automatically tell the user if he / she was unable to login. The user will have to click the login button again to see if the login failed.
Here is the line where the user will know if the login failed:
<p><?php if($_GET['result']=='failed'){echo 'invalid login';}?></p>
This is the complete code of the login window where the user needs to click the login button to display the login form popup:
<li>
<a href = "javascript:void(0)"
onclick ="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'">Login</a></li>
</ul>
<!--Black Overlay-->
<div id="fade" class="black_overlay" onLoad="initDynamicOptionLists()"></div>
<!--Pop Up Div-->
<div id="light" class="white_content">
<div id="loginbox">
<span id="login-form">Login</span>
<form method="post" action="config-login.php">
<table width="345" align="center" style="background:honeydew; vertical-align:top; margin:0px auto; border:solid medium yellowgreen;">
<tr>
<td class="myimage">Email :</td>
<td width="196" style="padding-right:2px;"><input type="text" name="member_email" style="width:100%"/></td></tr>
<tr>
<td class="myimage">Password : </td>
<td style="padding-right:2px;"><input type="password" name="member_password" style="width:100%"/></td></tr>
</table>
<div style="background:greenyellow; display:block; width:100%; overflow:hidden; margin:10px 0; padding:10px 0;">
<input type="hidden" name="return" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
<p><?php
if($_GET['result']=='failed'){
echo 'invalid login';
}?>
</p>
<input class="myimage" style="margin-right:10px; padding:0 10px; float:right;" type="submit" value="Login"/>
<span style="position: absolute; top: 11px; right:1px; color:white;" id="closeBlocked">
<a style="color:green; text-decoration:none; background:white; padding:10px;"
href = "javascript:void(0)"
onclick ="document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'"><b>X</b></a></span>
</div>
</form>
</div>
</div>
<!-- End of Pop Up Div-->
<?php
session_start();
// include connection file
include("configPDO.php");
$member_email=$_POST['member_email'];
$member_password=$_POST['member_password'];
$return = mysql_real_escape_string($_POST['return']);
$STM = $dbh->prepare("SELECT * FROM customer WHERE member_email = :member_email AND member_password = :member_password");
$STM->bindParam(':member_email', $member_email);
$STM->bindParam(':member_password', $member_password);
$STM->execute();
$count = $STM->rowCount();
$row = $STM -> fetch(PDO::FETCH_ASSOC);
if ( $count == 1 ) {
session_start();
$_SESSION['login_id'] = $row['member_id'];
$_SESSION['member_name'] = $row['member_name']; // added
$_SESSION['member_email'] = $row['member_email']; // added
//echo 'SESSION =' .$_SESSION['myusername'];
//echo 'ROW =' .$row['myusername'];
//var_dump($row);
if ( $_SESSION['login_id'] != '' || $_SESSION['login_id'] > 0 ) { // edited
header("Location: http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
} else {
header("location:index.php"."?result=failed");
}
}
else
{
header("location:index.php"."?result=failed");
}
$dbh = null;
?>
source to share
you can achieve this with the get variable
just add id to
<a href = "javascript:void(0)"
onclick ="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'">Login</a>
like
<a id="popmeup" href = "javascript:void(0)"
onclick ="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'">Login</a>
and put code at the end of document before end of body tag
<?php
if($_GET['result']=='failed'){ ?>
<script type="text/javascript">
document.getElementById('popmeup').click();
</script>
<?php }?>
source to share
If you want the window to appear again after reloading the page, you can use a function window.onload
to do so.
<?php if ( ! empty($_GET['result']) && $_GET['result'] == 'failed' ): ?>
<script>
function showLogin() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
window.onload = showLogin;
</script>
<?php endif; ?>
<!--Black Overlay-->
<div id="fade" class="black_overlay" onLoad="initDynamicOptionLists()"></div>
<!--Pop Up Div-->
<div id="light" class="white_content">
Edit: Updated with script tags, oops.
source to share
You can use a hash in the url and check it with JavaScript. Added bonus: if the login form is under the custom browser window layer, it will automatically scroll there.
In your PHP file, add #loginbox
your referral: header('Location: index.php?result=failed#loginbox');
.
Then you can check if the login window should be shown with window.location.hash
.
Something like this should work:
if (window.location.hash == 'loginbox') {
document.getElementById('loginbox').style.display = 'block';
}
You can even use a pure CSS solution using a pseudo class :target
to show the login window (this works in most modern browsers I think).
Just adding this to your CSS file should work:
#loginbox:target {
display:block;
}
Edit:
Just saw that you are probably hiding a div with an id light
and not a lightbox. Obviously, you have to adapt the ID according to the actual ID you are hiding (using CSS display:none;
, I think).
source to share