I am trying to open different pages depending upon the user who has logged in. The code works fine till setting the session storage variables and can get the variables but the function window.open does not work after that.
<!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="">
<title>Greenleaf Airconditioning Services LLC</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h2 style="color:green;" class="text-center">Green Leaf Airconditioning Services LLC</h2>
<div class="container">
<h2 class="text-center">Login</h2>
<form class="form-horizontal" id="register-form" role="form" onsubmit="getval()" novalidate="novalidate">
<div class="form-group">
<div class="col-sm-2"></div>
<label class="control-label col-sm-2" for="empid">Emp ID:</label>
<div class="col-sm-4">
<input type="number" min="1" step="1" class="form-control" id="empid" required placeholder=1 required>
</div>
<div class="col-sm-4"></div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label class="control-label col-sm-2" for="psw">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="psw" required placeholder="Enter password" required>
</div>
<div class="col-sm-4"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-danger">Cancel</button>
<a href="register.html" class="btn btn-link" role="button">Register</a>
</div>
</div>
</form>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
function getval(){
var myobj = {};
myobj.usrname= $( "#empid" ).val();
myobj.usrpass= $("#psw").val();
var myjson = JSON.stringify(myobj);
$.ajaxSetup( { "async": false } );
$.ajax({
method: "POST",
url: "php/checkpass.php",
data: {"points": myjson}
})
.done(function( msg ) {
if(msg == 'Success') {
// now set the session storage variables for this user for future actions
// get json object of all the data related to the user except the password
$.getJSON("php/sessionstore.php", {id: $( "#empid" ).val()}, function(data){
$.each(data,function(index,item)
{
localStorage.setItem('userid', item.EmpId);
localStorage.setItem('username', item.EmpName);
localStorage.setItem('usermail', item.EmpEmail);
localStorage.setItem('supmail', item.SupEmail);
localStorage.setItem('issup', item.IsSup); });
});
} else
{
alert('incorrect password');
$("#register-form").reset();
}
});
$.ajaxSetup( { "async": true} );
alert(localStorage.getItem("userid"));
window.open ('http://www.airtec-intl.com/pages/hrmain.html','_self',false);
if(localStorage.getItem("userid") > 0){
// load pages depending upon login - normal users, supervisors, human resources
if(localStorage.getItem("userid") > 999){
window.open ('pages/hrmain.html','_self',false);
} else if(localStorage.getItem("issup") > 0){
window.open ('pages/supmain.html','_self',false);
} else {
window.open ('pages/empmain.html','_self',false);
}
}
return false;
}
</script>
</body>
</html>
I changed the code as mentioned in the answers below but no avail. The changed javascript below
function getval(){
var myobj = {};
myobj.usrname= $( "#empid" ).val();
myobj.usrpass= $("#psw").val();
var myjson = JSON.stringify(myobj);
$.ajaxSetup( { "async": false } );
$.ajax({
method: "POST",
url: "php/checkpass.php",
data: {"points": myjson}
})
.done(function( msg ) {
if(msg == 'Success') {
// now set the session storage variables for this user for future actions
// get json object of all the data related to the user except the password
$.getJSON("php/sessionstore.php", {id: $( "#empid" ).val()}, function(data){
$.each(data,function(index,item)
{
localStorage.setItem('userid', item.EmpId);
localStorage.setItem('username', item.EmpName);
localStorage.setItem('usermail', item.EmpEmail);
localStorage.setItem('supmail', item.SupEmail);
localStorage.setItem('issup', item.IsSup); });
if(localStorage.getItem("userid") > 999){
window.location.href='http://www.airtec-intl.com/pages/hrmain.html';
} else if(localStorage.getItem("issup") > 0){
window.location.href='http://www.airtec-intl.com/pages/supmain.html';
} else {
window.location.href='http://www.airtec-intl.com/pages/empmain.html';
}
});
} else
{
alert('incorrect password');
$("#register-form").reset();
}
});
$.ajaxSetup( { "async": true} );
return false;
}
