Validar Username??

[kain_raziel]

Bueno una vez más pido de su ayuda para realizar algo que lo mas segura es sencillo la vdd soy nuevo con esto de ajax y no se muy bien como este la onda aun pero el chiste es hacer prueba y error para que todo quede bien .

El asunto que me trae al foro es el siguiente tengo un registro de usuarios en donde valido con un botón el nombre de usuario que ingresen antes de registrarse para ver si no esta en uso si es así muestra un mensaje de error informándole al usuario que ya existe dicho nombre. Ahora bien lo que quiero lograr es que esto lo valide automáticamente cuando ingresen su nombre de usuario sin necesidad de tener que pulsar dicho botón.

Aquí les pongo el código con el cual hago dicho proceso haber si me pueden echar una mano con esto:

Archivo de conexión comprobarUser.php:

Código PHP:

  <?php
$hostname_conn = "localhost";
$database_conn = "servidor";
$username_conn = "user";
$password_conn = "pass";
$conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR); 
 
$colname_rs_user = "-1";
if (isset($_POST['username'])) {
  $colname_rs_user = $_POST['username'];
}
mysql_select_db($database_conn, $conn);
$query_rs_user = sprintf("SELECT * FROM usuarios WHERE username = '%s'",$colname_rs_user);
$rs_user = mysql_query($query_rs_user, $conn) or die(mysql_error());
$row_rs_user = mysql_fetch_assoc($rs_user);
$totalRows_rs_user = mysql_num_rows($rs_user);
if($totalRows_rs_user == 0)
{
    echo '<div align="center" class="ok">Nombre de usuario Disponible';
}
else{
    echo '<div align="center" class="error">Nombre de usuario Ocupado';
}
?>
<?php 
mysql_free_result($rs_user);
?>   

Formulario new_user.php:

Código HTML:

<script type="text/javascript" language="javascript" src="ajax.js">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>

<div align="center">REGISTRO DE USUARIO</div>
        <form action="<?php echo $editFormAction; ?>" method="post" name="formUsuario" id="formUsuario">
          <table align="center">
        <tr valign="baseline">
          <td nowrap="nowrap" align="right">&nbsp;</td>
          <td><div id="estadoUser"></div></td>
          <td>&nbsp;</td>
          </tr>
            <tr valign="baseline">
              <td nowrap="nowrap" align="right">Nombre de usuario:</td>
              <td><input name="username" type="text" id="username" value="" size="32" /></td>
              <td><input name="button" type="button" class="style4" id="button" value="Comprobar" onclick="javascript:ComprobarUsuario('./comprobarUser.php','estadoUser')" /></td>
            </tr>
            <tr valign="baseline">
              <td nowrap="nowrap" align="right">Contraseña:</td>
              <td><input name="password" type="password" id="password" value="" size="32" /></td>
              <td>&nbsp;</td>
            </tr>
<tr valign="baseline">
              <td nowrap="nowrap" align="right">&nbsp;</td>
              <td><input type="submit" class="style4" onclick="MM_validateForm('username','','R','password');return document.MM_returnValue" value="REGISTRAR" /></td>
              <td>&nbsp;</td>
            </tr>
          </table>
<input type="hidden" name="MM_insert" value="formUsuario" />
      </form> 

Archivo AJAX ajax.js:

Código Javascript:

function getXMLHttpRequest(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function TraerPagina(datos,contenedor){
    divResultado = document.getElementById(contenedor);
    ajax=getXMLHttpRequest();
    ajax.open("GET", datos);
    ajax.onreadystatechange=function(){
    if(ajax.readyState==1)
        {divLoader.innerHTML='<center><img widht="50" height="50" src="./images/loading.gif"/><br/>Cargando...</center>'}
        else{
            if(ajax.readyState==4){divResultado.innerHTML=ajax.responseText;divLoader.innerHTML=''}
            }
        }
    ajax.send(null)
}
 
function ComprobarUsuario(datos,contenedor){
    divResultado = document.getElementById(contenedor);
    username_=document.formUsuario.username.value;
    if (username_ != ""){
    ajax=getXMLHttpRequest();
    ajax.open("POST", datos);
    ajax.onreadystatechange=function(){
    if(ajax.readyState==1)
        {divResultado.innerHTML='<center><img widht="50" height="50" src="./images/loading.gif"/><br/>Cargando...</center>'}
        else{
            if(ajax.readyState==4)
            {divResultado.innerHTML=ajax.responseText;}
            }
        }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //enviando los valores
    ajax.send("username="+username_);
    }else{
        divResultado.innerHTML='<div style="background-color:#FFAAAA"><span style="color:#999999", style="font-family:Calibri", style="font-weight:bold", style="font-size:12px">Desbes ingresar un Nombre de usuario.</b></span></div>'
    }
}
 

Bueno el asunto es que con estos tres archivos hago el proceso que les menciono espero que alguien me pueda ayudar con esto.

[CHuLoSoY]

Código HTML:

<input type="text" name="username" onblur="ComprobarUsuario('./comprobarUser.php','estadoUser');">
 

onBlur es el evento de cuando se pierde el foco. onFocus cuando se hace foco. onKeypress para cuando se pulsa una tecla, etc etc etc.

Puedes modificar el evento que quieras.

[cesarpunk]

creo que el evento que debes usar:

onKeyUp="ComprobarUsuario(this.value)"

[kain_raziel]

ok pues déjenme probarlo y les comento que tal me fue gracias por la ayuda

[kain_raziel]

bueno pues nada mas me paso por aquí para informarles que realmente solo necesitaba cambiar el evento a la caja de texto y eso fue todo muchas gracias por su ayuda