AJAX to check the login name exists or not

Question

i have a login box...

when the user starts typing.. i want to check whether the LOGIN NAME entered exists in the database or not...

if the login name is exist i am going to set the login button active... if it doesnot exist i am going to set the login button deactive...

offcourse i am going to need AJAX to perform my mySQL via PHP tough i don't know how it will be done...

lets say this is my query

<?php 
    $result = mysql_query("SELECT * FROM accounts WHERE name='mytextboxvalue'"); 
?>

how to do it

Answer 1

Look at jQuery AJAX and jQuery TypeWatch

But like @halfdan said, this is a potential security risk. I have never seen a site do this with a username, only with search results.

Your potentially giving away an end point (URL) on your web site which anyone could query to find out if a username is valid. Intranet or not, it is a risk.

Answer 2

You can use JSON-RPC, here is implementation in php.
and in JQuery you can use this code.

var id = 1;
function check_login(){
  var request = JSON.stringify({'jsonrpc': '2.0',
                       'method': 'login_check', 
                       'params': [$('#login_box').val()],
                       'id': id++});
  $.ajax({url: "json_rpc.php", 
        data: request,
        success: function(data) {
          if (data) {
            $('#login_button').removeAttr('disabled');
          } else {
            $('#login_button').attr('disabled', true);
          }
        },
        contentType: 'application/json',
        dataType: 'json',
        type:"POST"});
}

and in php

<?php

include 'jsonRPCServer.php';
//mysql_connect 
//mysql_select_db
class Service {
  public function login_check($login) {
     $login = mysql_real_escape_string($login);
     $id = mysql_query("SELECT * FROM accounts WHERE name='$login'");
     return mysql_num_rows($id) != 0;
  }
}


$service = new Service();

jsonRPCServer::handle($service);

?>

Answer 3

keep it simple:

$(document).ready(function(){
    var Form = $('#myForm');
    var Input = $('input.username',Form)

    Input.change(function(event){
        Value = Input.val();
        if(Value.length > 5)
        {
            $.getJSON('/path/to/username_check.php',{username:Value},function(response){
                if(response.valid == true)
                {
                    Form.find('input[type*=submit]').attr('disabled','false');
                }else
                {
                     Form.find('input[type*=submit]').attr('disabled','true');
                }
            });
        }
    });
});

and then PHP side..

<?php
//Load DB Connections etc.
if(!empty($_REQUEST['username']))
{
    $username = mysql_real_escape_string($_REQUEST['username']);

    if(isset($_SESSION['username_tmp'][$username]))
    {
        echo json_encode(array('valid' => (bool)$_SESSION['username_tmp'][$username]));
        die();
    }
    //Check the database here... $num_rows being a validation var from mysql_result
    $_SESSION['username_tmp'][$username] = ($num_rows == 0) ? true : false;

    echo json_encode(array('valid' => (bool)$_SESSION['username_tmp'][$username]));
    die();
}
?>