In this Video tutorial, we build a login form which checks username and password and displays appropriate message on the same page, without refreshing the page.
Here we get the username and password from the user and check it against our database table records.
If the username, password combination is present, then the login success message is displayed, else login failed message is shown to the user.
Related Read: (for Database info and other related code)
Registration Form Using jQuery + PHP + AJAX (PART 1)
Registration Form Validation: PHP + jQuery + AJAX (PART 2)
HTML File: Login form
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head><title>Login Form: jQuery + PHP + AJAX</title></head> <body> <form id="myForm" action="login.php" method="POST"> username: <input type="text" name="username" id="username"/><br /> password: <input type="password" name="password" id="password"/><br /> <button id="submit">Login</button> </form> <div id="ack"></div> <script type="text/javascript" src="script/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="script/my_script.js"></script> </body> </html> |
Here we have a form with an id myForm.
It has two input fields.
One button. And a div with an id of ack, where we display the messages to the user.
For database info, please have a glance at:
Registration Form Using jQuery + PHP + AJAX (PART 1)
PHP File: Processing the username, password
login.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | < ?php
include_once('db.php');
$username = mysql_real_escape_string( $_POST["username"] );
$password = mysql_real_escape_string( md5($_POST["password"]) );
if( empty($username) || empty($password) )
echo "Username and Password Mandatory - from PHP";
else
{
$sql = "SELECT count(*) FROM users WHERE(
username='$username'
AND
password='$password')";
$res = mysql_query($sql);
$row = mysql_fetch_array($res);
if( $row[0] > 0 )
echo "Login Successful";
else
echo "Failed To Login";
}
?> |
We protect our application against sql injection by wrapping the user entered data with mysql_real_escape_string() method.
Next we check whether the username and password is not empty: server side validation.
If it’s not empty:
We check if the username and password combination entered by the user is actually present inside our database.
Also note that, we md5() encrypt the user entered password, inorder to match with the md5() encrypted data present in our database: encrypted while registering.
If the username, password combination is present, then we display “Login Successful” else “Failed To Login”.
These messages will be caught by the call back function of jQuery and is displayed to the user.
jQuery File: With jQuery AJAX Mehod, $.post
my_script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $("button#submit").click( function() {
if( $("#username").val() == "" || $("#password").val() == "" )
$("div#ack").html("Please enter both username and password");
else
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(data) {
$("div#ack").html(data);
});
$("#myForm").submit( function() {
return false;
});
}); |
Here we validate the data at client end by checking if the user has entered both username and the password, if entered, we post the user entered data to login.php file after serializing it with jQuery serializeArray() method.
Once the login.php processes the data, the call back function present in our $.post() method accepts the data from login.php and displays it to the user.
Also we disable the form redirection by returning false, once the user clicks on the submit button of the form.
Login Form: jQuery + PHP + AJAX
[youtube https://www.youtube.com/watch?v=lUd0e9Uk6x0]
We have just illustrated the way by which you can ajaxify the login form.
Using this method, you could do more. Like, redirect or include a page after the login is successful etc..
This video tutorial is a basic building block to all those amazing jQuery AJAX login forms.
very nice tut !
Because of this line of codes
$(“#myForm”).submit( function() {
return false;
});
my page cannot be directed to the main page. IT stucks at the login page.
What can I do to direct it back to the mainpage after logging in ?
Yes, you’re right: Those lines of code prevents the page from redirecting.
Just remove those lines of code and the page will be redirected to the page/link present in the action field of the form tag.
Hope that clarifies.
However, if i remove that sentence, it works when the user login with the correct pass and username.
But if they have the wrong username or password “Failed to Login” will not appear on the same page itself.
Then there will be no point using jquery right?
Is there anyway to redirect the page, even if those lines are there?
Try this:
in login.php you check if login was successful or failed.
If successful, return 1 else 0
In my_script.js, there is callback function: check the value returned. Based on that make the decision.
If it returned 0, then call the method which restricts redirection( noRedirect() ).
function noRedirect() {
$(“#myForm”).submit( function() {
return false;
});
}
Also, when login.php returns 0, using .html attribute display the login failed error message to the user.
nice article. well written
does not work on the latest version of internet explorer
Daniel, it does work. Please try debugging your code
when i enter the correct username and password or wrong it does not display “login successfully” or “failed.” It only display the codes in login.php.
how to solve this issue
@reva, Looks like you copied code from above article? If so, remove the space in the beginning lines of login.php < ?php There shouldn't be any space after < and ? Watch the video and try coding it yourself along with me ..
good work .keep doing