Echo success or failure on the same page - php

Question

This is my sign-up form.
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="register.php" method="POST">
<div class="top-row">
<div class="field-wrap">
<label>
Username<span class="req">*</span>
</label>
<input name="username" type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
E-mail<span class="req">*</span>
</label>
<input name="email" type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input name="password" type="password"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Repeat password<span class="req">*</span>
</label>
<input name="rpassword" type="password"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="login.php" method="post">
<div class="field-wrap">
<label>
Username<span class="req">*</span>
</label>
<input name="username" type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input name="password" type="password"required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
Then the register.php
<?php
session_start();
$host= 'localhost';
$user='root';
$pass='';
$db='gameforum';
$conn=mysqli_connect($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$username = $_POST['username'];
$password = $_POST['password'];
$rpassword = $_POST['rpassword'];
$email = $_POST['email'];
if ($password!==$rpassword) {
echo "Passwords did not match, please try again!"
$conn->close();
}
else {
$sql = "INSERT INTO users (username, password, Repeat_Password, email)
VALUES ('$username', '$password', '$rpassword', '$email')";
if ($conn->query($sql) === TRUE) {
$redirectUrl = 'index.php';
echo '<script type="application/javascript">alert("Thank you for your registration! You may now log in with your account!"); window.location.href = "'.$redirectUrl.'";</script>';
}else{
echo "Username or Email already exists!". mysql_error();
}
$conn->close();
}
?>
The problem is that if the passwords do not match then the user comes to a blank page where it says that. I want the errormessage to pop up on the same page the user i signing up on. I do not know how to do that, any ideas?

Answer 1

There are two ways to do this. One is to use sessions, the other one is to redirect user back to login page with something like signin.php?err=invalid_pass
of you do it with a session, you will need this code on top of your sign in page. It will print out error message if you set any in your signin page.
<?php
session_start();
if(isset($_SESSION['err']))
{
echo $_SESSION['err'];
unset($_SESSION['err'];
}
alternatively, you can add this code on top of your sign-in page:
<?php
if(isset($_REQUEST['err']))
echo $_REQUEST['err'];
You will also need to replace your echo "Passwords did not match, please try again!"
with this if you do sessions:
$_SESSION['err']="Passwords did not match, please try again!";
header("Location: signin.php");
and this if you do using the other method.
header("Location: signin.php?err=You_Goofed");

Answer 2

You will need to use ajax on your HTML page. When the user clicks on the form button, instead of submitting the form to the server, use ajax to send the data to the server. Then return the data from the server to the client.
Example:
$('#submit-btn').click(function(e){
$.ajax({
type:'POST',
url:'register.php',
data:{
user:username,
pw:password
}
}.done(function(data){
if(data === false){
alert("passwords don't match!");
}
});
});
In your PHP page, you will validate the passwords. If they don't match, echo false.