Jump to content

Close iframe and redirect user to user_page


dagogodboss

Recommended Posts

OKKK! good day please i have little problem that is now a mighty one before me. I added a login form to a page using Iframe modal class i got from tinybox2. I have been able to login the user and in use the HEADER function to redirect the user to their user_page but the direction is done in the I-frame and not the parent window. Now my problem is how do i close the iframe and still redirect the user to the next page. I tried some javascript but all to no avail .

 

THE LOGIN AND I-FRAME PAGE SCRIPT

<?php
if(empty($errors)=== true){
			$login=login($username, $password);
			if($login === false){
			$errors[]='INVALID LOGIN DETAILS.... PLEASE CHECK YOUR DETAILS AND TRY AGAIN.';
			}
			else{
			$_SESSION["user_id"]=$login;
			?>
			<script> parent.window.close();</script>
			<?php
			header("location:user_page.php");
			}
			}
		if(empty($errors)=== false){
				$_SESSION["errors"]=$errors[0];
		}
		
	}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<link href="css/signin.css" rel="stylesheet" type="text/css">
</head>
<body>
			<div class="account-container">
			<div class="content clearfix">
			<form action="#" method="post">
			<h1>Member Login</h1>		
			<div class="login-fields">
			<p>Please provide your details</p>
			<div class="field">
			<label for="username">Username</label>
			<input type="text" id="username" name="username" value="" placeholder="Username" class="login username-field" />
			</div> <!-- /field -->
			<div class="field">
			<label for="password">Password:</label>
			<input type="password" id="password" name="password" value="" placeholder="Password" class="login password-field"/>
			</div> <!-- /password -->
			</div> <!-- /login-fields -->		
			<input class="login-fields_submit" type="submit" name="login" value="Log In">
			</form>
			<?php if(isset($_SESSION["errors"])){?>
			<h1 style="background:darkred;margin-bottom:-27px;font-size:9px !important;">
			<?php echo $_SESSION["errors"]; unset($_SESSION["errors"]);?></h1><?php }?>
			</div> <!-- /content -->
			</div> <!-- /account-container -->
</body>
</html>

PHP cant target elements in browser so using header will never work. Your only hope is to use javascript to target the parent window and change its location, something like

<script>
parent.window.location = 'target-page.php'
</script>

But using iframes is so old school. The more modern method is to use ajax to accomplish this.

 

Whereby when the user clicks the login/submit button you'd submit the forms contents via ajax. Your PHP script will only serve a success response if the users credentials where valid. In your JavaScript you'd then listen out for this response and decide what to do when the user logins successfully, such as redirect the page using javascript or dynamically load in the restricted elements into the page without having the page reload (like when you click the edit button on your post).

 

There are javascript frameworks out there which helps to aid in this process. JQuery is more common (there are others) or an alternative would be something AngularJS for creating single page applications.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.