samedi 18 avril 2015

Problems with redirecting user using javascript and php

I have a login form which when clicked runs a piece of javascript to call the php page to process the input.


I am having trouble with how its displaying the redirections based on the user role type. It tries to display this within the original login form.


The reasoning behind using javascript is purely because I want to be able to show user error on the same page without navigating to another page - it does this fine. But on successful submission the login page should direct the user to the correct dashboard. If I use the standard method of "method" and "action" to post to the form it works fine however my errors will be displayed on a new page which is what I don't want.


does anyone know how I can overcome this issue?


this is the form:



<?php


/*** begin session ***/
session_start();

/*** set a form token ***/
$form_token = uniqid();

/*** set the session form token ***/
$_SESSION['user_token'] = $form_token;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Insights Login</title>
<link rel="stylesheet" href="http://ift.tt/1Ai1JDR">
<link rel="stylesheet" href="http://ift.tt/1J4cr1i">
<link rel="stylesheet" href="styles.css">
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="http://ift.tt/1J4csCv"></script>
<script src='js/index.js'></script>
<script>

function loginCall() {
$(".text-danger").remove();
$(".text-success").remove();
var data = $('#loginForm').serialize();
$.post('LoginSubmit.php', data, function(response){

$("#loginForm").prepend(response);

}).fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>

</head>
<body>
<div class="container">
<div class="row">

<div class="col-md-6 col-md-offset-3">
<h1 style="border-bottom: 1px solid #c5c5c5;">

Insights Login
</h1>
<div style="padding: 20px;">
<form id = "loginForm" class="loginForm">
<fieldset>
<div class="form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user">
</i>
</span>
<input class="form-control" placeholder="Username" name="username" type="username" id="username" autofocus="">
</div>
<div class="form-group input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock">
</i>
</span>
<input class="form-control" placeholder="Password" name="password" type="password" id="password" value="">
</div>
<input type="hidden" name="user_token" value="<?php echo $_SESSION['user_token']; ?>"/>
<div class="form-group">
<button type="button" class="btn btn-block btn-success" class="pull-right" onclick="loginCall();">Login</button>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" value="Remember">
Remember me
</label>
</div>
</div>
<p class="help-block">
<a class="pull-right text-muted" href="ForgottenPassword.php"><small>Forgot your password?</small></a>
</p>
</div>
</fieldset>
</form>
</div>
</body>

</html>


this is the php which processes the form:



<?php

session_start();

/*** check that both the username, password have been submitted ***/
if (empty($_POST['username']))
{
echo '<h4><center><p class=text-danger>Username cannot be left empty</p></center></h4>';
}
elseif (empty($_POST['password']))
{
echo '<h4><center><p class=text-danger>Password cannot be left empty</p></center></h4>';
}

else {

$username = $_POST['username'];
$password = $_POST['password'];

if (!ctype_alnum($username)) {

echo '<h4><center><p class=text-danger>Username should be alpha numeric characters only.</p></center></h4>';
}

elseif (strlen($username) < 5 || strlen($username) > 50) {
echo '<h4><center><p class=text-danger>>username should be within 5-50 characters long.</p></center></h4>';
}

elseif (strlen($password) < 3 || strlen($password) > 40) {
echo '<h4><center><p class=text-danger>Password should be within 3-40 characters long.</p></center></h4>';
}

else {

include "includes/db_conx.php";

try
{
$db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);

$db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = $db_conx->prepare("SELECT username, password, user_record_id FROM login_details
WHERE username = :username AND password = :password");

/*** now we can encrypt the password ***/
$password = sha1( $password );

/*** bind the parameters ***/
$sql->bindParam(':username', $username, PDO::PARAM_STR);
$sql->bindParam(':password', $password, PDO::PARAM_STR, 40);
$sql->execute();

/*** check for a result ***/
$user_record_id = $sql->fetchColumn(2);

if(! $user_record_id)
{
echo "<p class='text-danger'>Login Failed - Credentials not recognised. Please try again</p>";
}

else {

$sql2=$db_conx->prepare("SELECT role_type_code FROM user where user_record_id = :user_record_id");

$sql2->bindParam(':user_record_id', $user_record_id, PDO::PARAM_STR);
$sql2->execute();
$user_role_code = $sql2->fetchColumn();

//echo $user_role_code;

/*** set the session user_id variable ***/
$_SESSION['username'] = $username;

// echo $user_record_id;
switch( $user_role_code)
{

case 1:
echo "Wrong Username or Password";

case 2:
header("location:Admin/AdminDashboard.php");
break;

case 3:
header("location:Supervisor/SupervisorDashboard.php");
break;

case 4:
header("location:Student/StudentDashboard.php");
break;

default:
echo "Login credentials not recognised. Please try again";
}
}


}
catch(Exception $e)
{
/*** if we are here, something has gone wrong with the database ***/
echo 'Message: ' .$e->getMessage();
}
}
}


die();

?>


this is what it looks like using the js when there is a successful submission


Dashboard with using javascript


when it should look like this:


How it should look


any help would be much appreciated. Thanks


Aucun commentaire:

Enregistrer un commentaire