Lewis Hoggerson Lewis Hoggerson - 2 months ago 9
CSS Question

PHP Header('Location: XYZ'); to locate to a div

going to keep this short!
So I've got a login/registration page and when a user registers to the site I want them to be shown the login page. Please note it's ONE page with the login and registration side by side, and when one is clicked it's shown whilst the other one is hidden.

Here is the page -index:
http://prntscr.com/ci48ee - What it looks like upon loading.
Here is the page -index upon clicking the login bit:
http://prntscr.com/ci48jh

index code:

<?php
include 'dbh.php';
if(isset($_POST['rsubmit'])){
$username = $_POST['username'];
$email = $_POST['email'];
$plainpass = $_POST['password'];
$password = password_hash($plainpass, PASSWORD_BCRYPT, array('cost' => 10));
$sql = "INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')";
$result = mysqli_query($conn, $sql);
header('Location: #login');
}else {}
?>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Mr. Liam</title>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#signup">Sign Up</a></li>
<li class="tab"><a href="#login">Log In</a></li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up to view content</h1>
<form action="index.php" method="post">
<div class="field-wrap">
<label>
Username<span class="req">*</span>
</label>
<input name="username" type="text"required/>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input name="email" type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input name="password" type="password"required autocomplete="off"/>
</div>
<button name="rsubmit" type="submit" class="button button-block"/>Register</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot"><a href="#">Forgot Password?</a></p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>


I'm guessing it's something along the lines of this??

Header('Location: #login');


But when I tried that it doesn't work. If you need any more info let me know!

Answer

You have to change which tab is active by setting the active class to the appropriate tab.

Currently it is on the signup tab and therefor that will be the tab that will load by default. I changed it below.

      <ul class="tab-group">
        <li class="tab"><a href="#signup">Sign Up</a></li>
        <li class="tab active"><a href="#login">Log In</a></li>
      </ul>

If you want to do this dynamically you can do..

<?php
$currentPage = $_GET['page'];
?>

      <ul class="tab-group">
        <li class="tab <?php if ($currentPage == "signup" ){echo "active" } ?>"><a href="#signup">Sign Up</a></li>
        <li class="tab <?php if ($currentPage == "login" ){echo "active" } ?>"><a href="#login">Log In</a></li>
      </ul>

So if the user goes to

www.website.com/user?page=login

if will show the login tab. or if they go to

www.website.com/user?page=signup

it will show the register tab.