Search code examples
htmlauthenticationserver-side

How can I make a dynamic, no redirect login page?


I want to build a login page that is static. What I mean by that is after I press "log-in", If my entry detaild are wring' I want to see it immediately, without re-directions. e.g. Google's login page or even Stackoverflow's. How can I do such a thing? In what programming language? Is it supposed to be a server-side one or client?


Solution

  • If you want result like wrong credentials without redirection , you can use AJAX call for your logic page AJAX is Asynchronous JavaScript and XML , which give call to backend or server without reloading page and get result or data

    following is short code example of ajax , in login.php you have to write backend code for database connection and login logic

    function submitForm() {		
    		var data = $("#login-form").serialize();				
    		$.ajax({				
    			type : 'POST',
    			url  : 'login.php',
    			data : data,
    			beforeSend: function(){	
    				$("#error").fadeOut();
    			},
    			success : function(response){						
    				if(response=="ok")
    				{									
    					//do redirection 
    				} 
    				else 
    				{	
    					$("#error").html(response);
    				}
    			}
    		});
    		return false;
    	} 
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Sample Login</title>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
    
    	<form class="form-login" method="post" id="login-form">
    		<h2 class="form-login-heading">User Log In Form</h2><hr />
    		<div id="error"></div>
    		<div class="form-group">
    			<input type="email"  placeholder="Email address" name="user_email" id="user_email" />
    			
    		</div>
    		<div class="form-group">
    			<input type="password"  placeholder="Password" name="password" id="password" />
    		</div>
    		<hr />
    		<div class="form-group">
    			<button type="button" name="login_button" id="login_button" onclick="submitForm()"> Sign In</button> 
    		</div> 
    	</form>		
    
    
    </body>
    </html>