• SelvaKumar1

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

    • SelvaKumar1 thanks that you liked it. ūüôā

  • zibamstereo

    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

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

  • Don Jajo

    Thanks alot dude, it really helps ūüôā

  • geraldLebel

    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 !

    ūüėČ

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

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

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

  • geraldLebel

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

  • geraldLebel

    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;

  • geraldLebel

  • geraldLebel

    ondeweb thanks a lot

  • WinterTactic

    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.

  • 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

    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

    • Thanks @phangcheekhenjoven

  • mancoeg

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

  • 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

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

  • 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

    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?

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

      cheers.

  • kevinmustafa

    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 ūüôā

    • 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

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

  • 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

    ondeweb¬†thanks a lot master ūüėÄ

  • AnkurSingh

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

  • AnkurSingh¬†
    ūüôā¬†
    thanks.

  • 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,

  • ondeweb¬†meetaswal¬†
    it jumps to else statement

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

  • 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>

  • 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

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

  • 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

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

  • 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

    i am now stuck in loading.gif

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

  • iloveonme

    Could i just empty the action?

  • haroonmind

    can you give a zip file for that ?

  • haroonmind

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

  • NishantSharma1

    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.!

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

  • NishantSharma1

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

  • NishantSharma1 Welcome.
    Sharing is caring.

  • blackst0rm

    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

  • 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.

  • blog

    Thanks for finally talking about >Simple Ajax Login form with jQuery and PHP | Ondeweb <Loved it!

  • Skinnerclibe

    it’s my very first time visiting your blog and I am very fascinated. Thanks for sharing and keep up ūüėČ

  • Paul Harding

    This is very insecure. We should never use mysql_ functions, all queries must be parameterised (e.g. use PDO). You are using untrusted strings directly in the sql which is going to attract sql injection. Also, you must not use MD5 as that is also insecure. For those reasons, nobody should follow this guide, it would be best to remove this guide completely.