I have copied most of the code below (and modified some) from a tutorial as I am new to coding and Bootstrap, I would like to know how to hide and then show the alert div telling users "Success! Well done its submitted" when the form contents are successfully posted.
<?php
require("includes/config.php"); //connection to DB and session start
if(!empty($_POST))
{
// Ensure that the user fills out fields
if(empty($_POST['username']))
{ die("Please enter a username."); }
if(empty($_POST['password']))
{ die("Please enter a password."); }
if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL))
{ die("Invalid E-Mail Address"); }
// Check if the username is already taken
$query = "
SELECT
1
FROM users
WHERE
username = :username
";
$query_params = array( ':username' => $_POST['username'] );
try {
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex-
>getMessage()); }
$row = $stmt->fetch();
if($row){ die("This username is already in use"); }
$query = "
SELECT
1
FROM users
WHERE
email = :email
";
$query_params = array(
':email' => $_POST['email']
);
try {
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex-
>getMessage());}
$row = $stmt->fetch();
if($row){ die("This email address is already registered"); }
// Add row to database
$query = "
INSERT INTO users (
username,
password,
salt,
email
) VALUES (
:username,
:password,
:salt,
:email
)
";
// Security measures
$salt = dechex(mt_rand(0, 2147483647)) . dechex(mt_rand(0, 2147483647));
$password = hash('sha256', $_POST['password'] . $salt);
for($round = 0; $round < 65536; $round++){ $password = hash('sha256',
$password . $salt); }
$query_params = array(
':username' => $_POST['username'],
':password' => $password,
':salt' => $salt,
':email' => $_POST['email']
);
try {
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex-
>getMessage()); }
header("Location: index.php");
die("Redirecting to index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Sign Up</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/signin.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
</head>
<body>
<div class="container">
<form class="form-signin" method="post">
<h2 class="form-signin-heading">Sign Up</h2>
<div class="alert alert-success alert-dismissable hidden">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×
</button>
Success! Well done its submitted.
</div>
<label for="inputUsername" class="sr-only">Username</label>
<input name="username" type="username" id="inputUsername" class="form-control" placeholder="Username" required autofocus>
<label for="inputEmail" class="sr-only">Email address</label>
<input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<!--<label for="inputEmail" class="sr-only">Email address</label>
<input name="username" type="email" id="inputEmail" class="form-control" placeholder="Confirm Email address" required autofocus>-->
<label for="inputPassword" class="sr-only">Password</label>
<input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" name="submit">Create Account</button>
</form>
</div> <!-- /container -->
</body>
</html>
