jquery-login

jQuery Ajax Login and Signup form – PHP Script!

Today’s tutorial focusing on a very Important stuff that is really needed for both the Beginner and Intermediate web developers. Yes, this tutorial is about creating a effective jQuery Login and Signup form with PHP.

If you want to see the DEMO or DOWNLOAD the script. Please scroll down to the bottom of this post!!

So, what all functionalities are there in this jQuery Ajax Login form?

1. It has both the Login form and Signup form together!
2. Both works without refreshing the page with the help of jQuery ajax POST function.
3. While Signing up checks if the Email is already registered or not.
4. Can be able to log in immediately after a successful registration without refresh!
5. A hidden page will be able to access only after a valid login.
6. Logout option.

How many files are there in this script?

There are four files:
1. index.php – this has the login form and registration form.
2. hiddenpage.php – this file can be accessed only after logged in (PHP Session).
3. checklogin.php – this file checks if the entered username and password is already there in the database or not.
4. check-email-registered – this file checks if the email id is already registered.
5. adduser.php – which is obviously adds the new user in the database.
6. db_con.php – it has the DB connections and database.

You need to create a database and table for this script or you can use an existing database but you should create a table to test this.

Here is the SQL for the table ‘user_table‘:

Let’s see the HTML part of the first file, index.php

If you see the above code, there are two forms wrapped by two DIVs, by default the second DIV “signup_form” is  hidden (display:none).

So, once the page loads you will able to see only the “login_form“, but this can be togged with two radio buttons where you can see the very first div “options“, with the help of jQuery on selecting the first radio button will show the “login_form” and by select the second radio button will the “signup_form“.

jQuery part for the above functionality is here:

Now the next part is “Login Form jQuery Part” which is again in index.php:

The above code is already commented, so you can easily understand if you already know a little bit of jQuery. But, anyhow I will explain what is this doing!!

So, there is a button with “id=login” in the “login_form” div. On click of this button $(‘#login’).click() all the other function written inside will work,
1. First it will get the value of email and password.
2. Then it will check if both the values are not empty, if then it will show an error message $(‘.msg’).text()!
3. Thirdly it will call a PHP file via $.post() function.
4. And if the PHP file return a success message “cool“, then it will redirect to the ‘hiddenpage.php‘ otherwise it will show error.

Now the next file is checklogin.php

This file is a pure PHP file, which has a normal database operations. First it connects to the database and query the table using SELECT then returns the number of rows. If the number of rows is greater than ZERO  it will print “cool“.

Now the Login Operations are over, the second form is Signup, you know it is again same like the above functions.

This jQuery function again comes in index.php

The above function will be triggered when the text box loses focus, basically when the cursor comes out of the text box. This script will check if the email enter in the text box is already present in the database or not by calling a PHP file ‘check-email-registered.php‘ and here it the code for that:

I think I don’t have to explain the above script it is same as the ‘checklogin.php‘.

And the final part is after clicking the Signup button, here is the jQuery function:

This script is again doing the same, get the values from the text boxes and passing it to the PHP file called ‘adduser.php‘ by jQuery $.post() function.

Here is the source code for the ‘adduser.php

The above PHP script will insert a record in the ‘user_table‘.

Other script are like Email validating JavaScript is used:

This script validates the email and returns true or false.

Check the demo and download the script here:

demo download

 

About the Author

agurchand

Software Engineer, Blogger etc., Visit my Youtube channel - <a href="http://www.youtube.com/agurchand">Click Here</a>

2 thoughts on “jQuery Ajax Login and Signup form – PHP Script!

Leave a Reply

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