Never mind got it working thanks.
Here is my index.php
<?php include('header.php'); ?>
<body>
<div class="container">
<div style="height:50px;">
</div>
<div class="row" id="loginform">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login
<span class="pull-right"><span class="glyphicon glyphicon-pencil"></span> <a style="text-decoration:none; cursor:pointer; color:white;" id="signup">Sign up</a></span>
</h3>
</div>
<!-- Body For Login -->
<div class="panel-body">
<form role="form" id="logform">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" name="username" id="username" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" id="password" type="password">
</div>
<button type="button" id="loginbutton" class="btn btn-lg btn-primary btn-block"><span class="glyphicon glyphicon-log-in"></span> <span id="logtext">Login</span></button>
</fieldset>
</form>
<!-- Body For Login -->
</div>
</div>
</div>
</div>
<div class="row" id="signupform" style="display:none;">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-pencil"></span> Sign Up
<span class="pull-right"><span class="glyphicon glyphicon-log-in"></span> <a style="text-decoration:none; cursor:pointer; color:white;" id="login">Login</a></span>
</h3>
</div>
<div class="panel-body">
<!-- Body for Sign up -->
<form role="form" id="signform">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Full Name" name="name" id="name" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Email" name="email" id="email" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Username" name="susername" id="susername" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="spassword" id="spassword" type="password">
</div>
<button type="button" id="signupbutton" class="btn btn-lg btn-primary btn-block"><span class="glyphicon glyphicon-check"></span> <span id="signtext">Sign Up</span></button>
</fieldset>
</form>
<!-- Body for Sign up -->
</div>
</div>
</div>
</div>
<div id="myalert" style="display:none;">
<div class="col-md-4 col-md-offset-4">
<div class="alert alert-info">
<center><span id="alerttext"></span></center>
</div>
</div>
</div>
</div>
<script src="custom.js"></script>
</body>
</html>
my login.php
<?php
include('conn.php');
session_start();
if (isset($_POST['username'])) {
$username=$_POST['username'];
$password=md5($_POST['password']);
$query=$conn->query("select * from users where username='$username' and password='$password'");
$row = $query->fetch_assoc();
$name = $row['name'];
$username = $row['username'];
$level = $row['level'];
if($username==$username && $password=$password){
if($level=="admin"){
$_SESSION['users']=$row['id'];
$_SESSION['level']=$row['level'];
header('location: admin/home.php');
}elseif ($level=="user") {
$_SESSION['users']=$row['id'];
$_SESSION['level']=$row['level'];
header('location: user/home.php');
}else{
?>
<span>Login Failed. User not Found.</span>
<?php
}
}
}
?>
any my ajax script
$(document).ready(function(){
//bind enter key to click button
$(document).keypress(function(e){
if (e.which == 13){
if($('#loginform').is(":visible")){
$("#loginbutton").click();
}
else if($('#signupform').is(":visible")){
$("#signupbutton").click();
}
}
});
$('#signup').click(function(){
$('#loginform').slideUp();
$('#signupform').slideDown();
$('#myalert').slideUp();
$('#signform')[0].reset();
});
$('#login').click(function(){
$('#loginform').slideDown();
$('#signupform').slideUp();
$('#myalert').slideUp();
$('#logform')[0].reset();
});
$(document).on('click', '#signupbutton', function(){
if($('#susername').val()!='' && $('#spassword').val()!=''){
$('#signtext').text('Signing up...');
$('#myalert').slideUp();
var signform = $('#signform').serialize();
$.ajax({
method: 'POST',
url: 'signup.php',
data: signform,
success:function(data){
setTimeout(function(){
$('#myalert').slideDown();
$('#alerttext').html(data);
$('#signtext').text('Sign up');
$('#signform')[0].reset();
}, 2000);
}
});
}
else{
alert('Please input both fields to Sign Up');
}
});
$(document).on('click', '#loginbutton', function(){
if($('#username').val()!='' && $('#password').val()!=''){
$('#logtext').text('Logging in...');
$('#myalert').slideUp();
var logform = $('#logform').serialize();
setTimeout(function(){
$.ajax({
method: 'POST',
url: 'login.php',
data: logform,
success:function(data){
if(data==''){
$('#myalert').slideDown();
$('#alerttext').text('Login Successful. User Verified!');
$('#logtext').text('Login');
$('#logform')[0].reset();
setTimeout(function(){
location.reload();
}, 2000);
}
else{
$('#myalert').slideDown();
$('#alerttext').html(data);
$('#logtext').text('Login');
$('#logform')[0].reset();
}
}
});
}, 2000);
}
else{
alert('Please input both fields to Login');
}
});
});