50 thoughts on “Ajax Login form with jQuery and PHP

  • SelvaKumar1

    (August 2, 2013 - 1:06 pm)

    really nice Shreyo and Thanks for sharing .. Keep up the good work ..

    • ondeweb

      (August 2, 2013 - 2:18 pm)

      SelvaKumar1 thanks that you liked it. ūüôā

  • zibamstereo

    (September 30, 2013 - 8:05 pm)

    just stumbled across your tutorial on the web mate..nice info…a link to the source files .probably an online demo will aid my understanding.
    Cheers

    • Shreyo

      (September 30, 2013 - 11:39 pm)

      thanks for your suggestion. I’ll provide the demo very soon. (y)

  • Don Jajo

    (December 12, 2013 - 6:28 pm)

    Thanks alot dude, it really helps ūüôā

  • geraldLebel

    (February 2, 2014 - 4:52 pm)

    Amazing tuts ! Great, many thanks but could u give an example of mySQL db  please?

    i’ve tried to create this, but i’m so newbies and i don’t work with my mySQL db !!! grrr

    An sql file will be just incredible !

    ūüėČ

    • Shreyo

      (February 2, 2014 - 9:32 pm)

      happy that it helped you. sure. i will add the sql db.

  • ondeweb

    (February 2, 2014 - 9:36 pm)

    zibamstereo sure. i’ll try to add a demo link.

  • ondeweb

    (February 2, 2014 - 9:36 pm)

    geraldLebel happy that it helped you. sure. i will add the sql db.

  • geraldLebel

    (February 2, 2014 - 10:57 pm)

    ondeweb¬†Sounds good, lot of thanks ! ūüėČ

  • geraldLebel

    (February 3, 2014 - 10:59 pm)

    ondeweb

    this is right ?

    CREATE TABLE login (
    name_id int(10) NOT NULL AUTO_INCREMENT,
      word varchar(250) DEFAULT NULL,
      PRIMARY KEY (name_id)
    ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

  • ondeweb

    (February 5, 2014 - 1:47 pm)

    geraldLebel

  • geraldLebel

    (February 5, 2014 - 2:24 pm)

    ondeweb thanks a lot

  • WinterTactic

    (February 16, 2014 - 3:31 am)

    Firstly, you should give credit to the original author. http://tutsforweb.blogspot.com/2012/05/ajax-login-form-with-jquery-and-php.html

    Second, MySQL_* functions are DEPRECATED and should be replaced with http://www.php.net/manual/en/book.pdo.php or http://php.net/mysqli.

  • ondeweb

    (February 18, 2014 - 10:18 am)

    WinterTactic
    thanks for noting the url. but to be true, i didnt knew that page existed. this  form/ code was created for one of my project. 

    coming to ‘mysql_’ its deprecated in ver5.5 and till today most webservers have 5.3/5.4. but yes, in due time things will change so is the code.¬†
    for encryption, its up to you/ the security level to decide md5 or any other method. 
    this i posted as a pure sample and nothing more.

  • phangcheekhenjoven

    (March 20, 2014 - 11:52 am)

    Here is Bootstrap based login and register form.¬†http://jmsliu.com/1989/bootstrap-style-lightbox-ajax-form.html. My question is “Can I use your php code for server side?”

    Thanks

    • Shreyo

      (March 25, 2014 - 8:23 am)

      Thanks @phangcheekhenjoven

  • mancoeg

    (April 9, 2014 - 3:04 pm)

    Gr8 post , but may i know what about “dashboard.php”.

  • ondeweb

    (April 9, 2014 - 11:58 pm)

    mancoeg thanks!

    for this you need to check for the session is set or not. please note the line no.12 to 14 in login.php, i am assigning some values to the session variables which you need to check at the very top of dashboard.php. if set, then use include/ require dashboard.php else redirect to index.php/ login.php whichever file name you set.

  • GeorgyTurkin

    (July 23, 2014 - 6:19 am)

    SQL injection on line 6 in login.php can be done easily

  • ondeweb

    (July 24, 2014 - 8:14 am)

    GeorgyTurkin yes, there are chances.
    the intention of this post is to demonstrate the ease of using ajax call. But I would request you to suggest the best way to stop that evil so the readers too can know about way to stop sql injection and other similar vulnerability.
    thanx.

  • MikChaos

    (August 5, 2014 - 7:58 am)

    Hello great tutorials sir only i have problems on.. ¬†success:function(html) is not working on me it’s only taking beforeSend:function().. did i missed something?
    were did this html parameters came from?

    • Shreyo

      (August 25, 2014 - 8:11 am)

      Hello MikChaos,
      the html in success:function(html) is from login.php. you can see ‘echo “true”‘ in line no.11.

      cheers.

  • kevinmustafa

    (September 3, 2014 - 5:09 pm)

    what is this line of code use for? : 
    success:¬†function(html){if(html==’true’){//$(“#add_err”).html(“right username or password”);window.location=”dashboard.php”;}else{$(“#add_err”).css(‘display’,¬†‘inline’,¬†‘important’);$(“#add_err”).html(“<img src=’images/alert.png’ />Wrong username or password”);}},beforeSend:function(){$(“#add_err”).css(‘display’,¬†‘inline’,¬†‘important’);$(“#add_err”).html(“<img src=’images/ajax-loader.gif’ /> Loading…”)}

    just confuse with those lines of code
    sorry I am a newbie for ajax ūüôĀ¬†
    Thanks before ūüôā

    • Shreyo

      (September 6, 2014 - 9:30 pm)

      first line:
      on success -> set the window location to dashboard.php i.e. redirecting to dashboard.php page.
      else statement -> if the username and password combination is wrong, display message.

      the other one
      while the parameter & value is being sent do this -> show a loading animation

  • kevinmustafa

    (September 3, 2014 - 5:10 pm)

    especially for sucess:function(html) and .html .css part…

  • ondeweb

    (September 6, 2014 - 9:33 pm)

    kevinmustafa 
    first line:
    on success -> set the window location to dashboard.php i.e. redirecting to dashboard.php page.
    else statement -> if the username and password combination is wrong, display message.
    the other one
    while the parameter & value is being sent do this -> show a loading animation

  • kevinmustafa

    (September 16, 2014 - 8:41 am)

    ondeweb¬†thanks a lot master ūüėÄ

  • AnkurSingh

    (September 29, 2014 - 10:03 am)

    I was tired searching this online… ¬†thanx a lot
    for making such a good understandable tutorial ..
    keep it up

  • ondeweb

    (September 30, 2014 - 7:54 am)

    AnkurSingh 
    ūüôā¬†
    thanks.

  • ondeweb

    (November 8, 2014 - 5:30 pm)

    meetaswal
    add an alert within the if condition and check if ‘if’ works or its jumps on to else statement.
    will be happy to clarify further doubt.

    thanks,

  • meetaswal

    (November 8, 2014 - 5:37 pm)

    ondeweb meetaswal 
    it jumps to else statement

  • meetaswal

    (November 8, 2014 - 5:38 pm)

    ondeweb meetaswal
    alert is working fine outside if-self i.e. immediately below success:{} function

  • meetaswal

    (November 8, 2014 - 5:40 pm)

    ondeweb meetaswal 
    pls check my code below for login.js

                  <script>
    $(document).ready(function(){                
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).css(‘display’, ‘none’, ‘important’);
    $(“#submit”).click(function() {
    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† email2=$(“#email2”).val();
                
    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† password2= $(“#password2”).val();
            
                $.ajax({
    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† type: “POST”,
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†url: “http://worldofprofessionals.com/asiannetworkers/login_action.php”,
                   
    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† data: “email2=”+email2+”&password2=”+password2,
                    success: function(html){  
                      alert(html);
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†if(html == ‘true’)¬†¬†¬† {
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†//$(“#add_err”).html(“right username or password”);
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†window.location=”loggedin.php”;
                    
                        }
                        else    {
    ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).css(‘display’, ‘inline’, ‘important’);
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).html(“Wrong username or password”);¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†
                                               }
                        },
                        
                               beforeSend:function()
                                   {
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).css(‘display’, ‘inline’, ‘important’);
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).html(“Loading….”);¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†
                                }
                          });
                        
            return false;
                 });
                 });            
    </script>

  • meetaswal

    (November 8, 2014 - 5:42 pm)

    my code is below for login.js. If statement is not working as it is jumping to else statement

    pls check my code below for login.js

               <script>
    $(document).ready(function(){                
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).css(‘display’, ‘none’, ‘important’);
    $(“#submit”).click(function() {
    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† email2=$(“#email2”).val();
                
    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† password2= $(“#password2”).val();
            
                $.ajax({
    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† type: “POST”,
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†url: “http://worldofprofessionals.com/asiannetworkers/login_action.php”,
                   
    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† data: “email2=”+email2+”&password2=”+password2,
                    success: function(html){  
                      alert(html);
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†if(html == ‘true’)¬†¬†¬† {
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†//$(“#add_err”).html(“right username or password”);
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†window.location=”loggedin.php”;
                    
                        }
                        else    {
    ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).css(‘display’, ‘inline’, ‘important’);
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).html(“Wrong username or password”);¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†
                                               }
                        },
                        
                               beforeSend:function()
                                   {
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).css(‘display’, ‘inline’, ‘important’);
    ¬†¬†¬† ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†$(“#error_msg”).html(“Loading….”);¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†
                                }
                          });
                        
            return false;
                 });
                 });            
    </script>
    Read more: http://www.ondeweb.in/ajax-login-form-with-jquery-and-php/#ixzz3ITir0bfI

  • meetaswal

    (November 8, 2014 - 5:55 pm)

    hey thanks buddy, i have added
    if($.trim(html) == ‘true’)

  • ondeweb

    (November 10, 2014 - 6:37 pm)

    meetaswal ondeweb 
    alert your incoming values through input controls and see if they are right. and also check login.php values through post by accessing login.php directly.

  • otaama90

    (December 11, 2014 - 9:46 pm)

    isnt some of the code actually html, like the login?

  • ondeweb

    (December 16, 2014 - 10:51 pm)

    otaama90 login.php is just for retrieving and checking for the value passed on from the user and the database. hence, we don’t need any html in that.

  • iloveonme

    (December 20, 2014 - 12:22 am)

    i am now stuck in loading.gif

  • ondeweb

    (December 24, 2014 - 1:48 am)

    iloveonme action will be ‘./’ indicating the current directory.

  • iloveonme

    (December 25, 2014 - 4:18 am)

    Could i just empty the action?

  • haroonmind

    (January 21, 2015 - 6:33 pm)

    can you give a zip file for that ?

  • haroonmind

    (January 21, 2015 - 8:53 pm)

    here is a working condition zip file last of the page thanks a lot
    http://www.thebytecodes.com/wordpress/?p=22

  • NishantSharma1

    (June 25, 2015 - 1:50 pm)

    it is working perfectly for most of the part. I just can’t find the part where the password authentication is happening. There is no password in the DB. So anything i’m doing is giving me a “Wrong Username/Password alert”. I’m relatively new to all this so please bear with me if the question is stupid.!

  • ondeweb

    (June 27, 2015 - 3:37 pm)

    NishantSharma1 you can add the ‘pass’ column to the db. I change the db screenshot.

  • NishantSharma1

    (June 27, 2015 - 4:55 pm)

    Ya I ended up doing that… I thought there was something in your code that I was missing. Thanks for the reply anyway. ūüôā

  • ondeweb

    (June 27, 2015 - 4:57 pm)

    NishantSharma1 Welcome.
    Sharing is caring.

  • blackst0rm

    (September 29, 2015 - 9:28 am)

    This is an incredible bad tutorial. It has a major security issue. NEVER! pass un alidated user input to an SQL-Query. And also NEVER! use string concatenation for building queries.
    Use PDO or at least prepared statements for this.
    Another issue is the use of MD5 to hash the passwords. MD5 has to be considered as compromised. Use bcrypt instead.
    I could dump complete user database from a page which is using this login mechanism with a simple SQL-Injection attack and decrypt the password hashes with a simple lookup in the rainbow tables. This could easyli be prevented by using state of the art techniques instead of year 2005 php style…
    Please take down this article or correct it to fix security problems

  • ondeweb

    (October 10, 2015 - 4:47 pm)

    blackst0rm thank you for the knowledge share.
    But in one of my previous comment i had mentioned that this is just for the purpose of demonstration only. further sql injection issues need to be taken care of.

Leave a Reply

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