Monday, February 28, 2011

New way of login authentication using jquery and php

In this tutorial i am going to show a new way of login authentication using jquery and php.These tutorial can be considered as an example of ajax.
The Idea
For login authentication we basically need 2 fields ,one is either email or username and the second password.
In order to get into your dashboard we have to click the login button.Here what i am going to do is disable the login button until the user provides both username and password correctly ,if so they provide the fields correctly the login button will be visible for clicking.

before providing form fields

after providing form fields

Online demo

the code for the above example can be taken from here

the only thing you have to change is jquery part just replace the code in default.js with following code below

$(function() {
    $('#password').change(function() { // when we release the key
        var pass = $('#password').val();
        if(pass.length >= 3) { // if there are more then 3 letters
            var data = 'username='+ $("#username").val() + '&pass=' + pass;
            // ajax call
                type: "POST",
                url: "login.php",
                data: data,
                success: function(html){ // this happen after we get result
                    if(html !== '') {
                     $('form').append("<input type=\"button\" id=\"submit\" value=\"Login\">");
$('#username').attr('disabled', true);
$('#password').attr('disabled', true);
                        $("#form").hide(); // hiding form

the changes that i made are i replaced the .keyup with .change (it was creepy thing that i found if i use keyup)

then if the user has provided the fields correctly then the fields are again not editable they are disabled.

if anyone liked share your views


  1. does it work in blogger?????????

  2. Hello!! I want ur help regarding Uploading Wordpress themes using FileZilla. It asks for a Host, Username, Password So, what username, password should I use to fill them......

  3. please google it my friend



fuzionpro Headline