I have developed a drop-down login panel using Bootstrap 3.3.7. Where the user inputs the username and password used during registration. What I want is, If login is successful I want the user to be redirected to another page called profile.php else if login is not successful an error message will appear on the login panel footer.
The HTML code for the panel:
<li class="nav-link dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span>Login</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div style="width:300px;">
<div class="panel-heading text-center" style="color:black;">LOGIN</div>
<div class="panel-heading">
<label for="email">username</label>
<input type="text" class="form-control" id="username">
<label for="email">Password</label>
<input type="password" class="form-control" id="password">
<br>
<a href="#" style="color:blue; list-style:none;">Forgotten password?</a><input type="submit" class="btn btn-success" style="float:right;" id="login" value="login">
</div>
<div class="panel-footer" id="login_msg"></div>
</div>
</div>
</li>
The javascript login code:
$("#login").click(function(event) {
event.preventDefault();
var u_name = $("#username").val();
var pass = $("#password").val();
$.ajax({
url: "login.php",
method: "POST",
data: {
userLogin: 1,
userUname: u_name,
userPassword: pass
},
success: function(data) {
if (data == "truejsdhfkh") {
window.location.href = "profile.php";
} else {
$("#login_msg").html(data);
}
}
})
})
The php login code:
<?php
// connect to the database
include "db.php";
//session start
session_start();
//login page
if(isset($_POST['userLogin'])){
$uname = mysqli_real_escape_string($con, $_POST['userUname']);
$passwrd = mysqli_real_escape_string($con, $_POST['userPassword']);
if(empty($uname) || empty($passwrd)){
echo "
<div class='alert alert-danger'>
<a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a><b>Please fill in all fields!</b>
</div>
";
exit();
}else{
$passwrd = md5($passwrd);
$sql = "SELECT * FROM user_info WHERE username = '$u_name' AND passwrd = '$password'";
$run_query = mysqli_query($con,$sql);
$count = mysqli_num_rows($run_query);
if($count == 1){
$row = mysqli_fetch_array($run_query);
$_SESSION["uid"] = $row["user_id"];
$_SESSION["uname"] = $row["username"];
echo "truejsdhfkh";
}
}
}
?>
When I click on the login button nothing happened. Can someone please guide me in doing this?