Login Page With Ajax and PHP Example

In this step we create login page create doLogin() method is javascript on click on button submit using ajax call login.php file, Here pass two parameter user_id and password and get the value in login.php. login.php file get parameter value $user_id=$_POST[‘user_id’]; and password value $password=$_POST[‘password’];

  1. Create index.html page write following code

 

<!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">
<title>Example of Bootstrap 3 Vertical Form Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="col-md-6">
    <form action="" method="post">
        <div class="form-group">
            <label for="inputEmail">User Id</label>
            <input type="text" class="form-control" id="userId" placeholder="User ID" required>
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        
        <button type="button" onclick="doLogin();" class="btn btn-primary">Login</button>
    </form>
        </div>
</div>
    
    <script>
        
        function doLogin()
        {
            userid=$('#userId').val();
            pwd=$('#inputPassword').val();
            
            jQuery.ajax({
			url:"login.php",
			type:"POST",
			dataType:"text",
			data:{
			user_id:userid,			   	
			password:pwd,			   	
                            
						   	
				},
			success:function(html){    				
				//alert('Record found')
			console.log('Product Array'+html); 
                                
                               // console.log('Product Master length'+html.length);
              
                                if(html=='valid')
                                {
                                    window.location='welcome.php';
                                     }
                            else
                            {
                             alert('invalid user id password');
                            }
          
         
        
			
				
			},error: function(e){
				console.log('line4');
				//alert('No Record found');
                                //document.getElementById("specilized_error").innerHTML = "No record found please specify query"; 
			
				}
			}); 
        }
        
        </script>
    
</body>
</html>                            

2. Now create login.php paste the following code

<?php

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

if($user_id=='admin' && $password=='admin123')
{
    echo 'valid';
}
else
{
    echo 'invalid';
}


?>

3. Create welcome.php after login successfully redirect welcome screen.

<h1>Welcome to new Page</h1>

Leave a Reply

Your email address will not be published. Required fields are marked *