[PHP / AJAX]: cambia el color del mensaje de acuerdo con el texto ingresado

Question

En la página de inicio de mi sitio web, tengo un nuevo formulario de registro de usuario. Contiene un campo & Quot; Nombre de usuario & Quot ;. Cuando el usuario ingresa el nombre de usuario y el foco apunta a otro campo, se ejecuta un código AJAX que verifica si algún usuario con el nombre de usuario ingresado ya existe o no.

El código AJAX que estoy usando es este:

function toggle_username(userid) { 
    if (window.XMLHttpRequest) { 
        http = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
        http = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    handle = document.getElementById(userid); 
    var url = 'ajax.php?'; 
    if(handle.value.length > 0) { 
        var fullurl = url + 'do=check_username_exists&username=' + encodeURIComponent(handle.value); 
        http.open("GET", fullurl, true); 
        http.send(null); 
        http.onreadystatechange = statechange_username; 
    }
    else
    { 
        document.getElementById('username_exists').innerHTML = ''; 
    }
}

El archivo " AJAX.PHP " llamado por el código anterior, es así:

<?php 
mysql_connect ('localhost', 'MyServer', 'user1'); 
mysql_select_db('globaldb'); 

$do = $_GET['do']; 
switch($do) { 
    case 'check_username_exists': 
        if(get_magic_quotes_gpc()) { 
            $username = $_GET['username']; 
        }else{ 
            $username = addslashes($_GET['username']); 
        } 
        $count = mysql_num_rows(mysql_query("SELECT * FROM `student_login` WHERE `username`='".$username."'")); 
        header('Content-Type: text/xml'); 
        header('Pragma: no-cache'); 
        echo '<?xml version="1.0" encoding="UTF-8"?>'; 
        echo '<result>'; 
        if($count > 0) {
            $_SESSION['UserExists'] = "true";

        }else{ 
            $_SESSION['UserExists'] = "false";
        } 
        $_SESSION['UserExists'] = "false";
        echo '</result>'; 
    break; 
    default: 
        echo 'Error, invalid action'; 
    break; 
} 
?>

En mi formulario de registro, justo debajo del cuadro de entrada de nombre de usuario, quiero definir una sección donde pueda mostrar los mensajes:

El usuario con este nombre existe, o

El nombre de usuario está disponible.

En mi página de inicio, estoy usando el siguiente código:

<input name="username" type="text" id="username"  onchange="toggle_username('username')" style="width:150px;" maxlength="40" size="22" >

<?PHP

   if ($_SESSION['UserExists'] == "true")
   {
    echo "<div id='username_exists' style='font-size: 11px;font-weight: bold;color:red'>User with this name unavailable.</div>";
   }
  else
  {
        echo "<div id='username_exists' style='font-size: 11px;font-weight: bold;color:darkgreen'> User with this name is available </div>";
  }
?>

La página de inicio consta del código anterior y el primer bloque de código (JavaScript) en la parte superior que di.

Este código no funciona. Y supongo que la razón es que he incluido los mensajes en el bloque PHP. Siendo del lado del servidor, no muestra los mensajes.

Por favor, hágame saber cómo manejar este problema. Ya sea para modificar el código JavaScript que llama al AJAX o incluir algo en el PHP.

Tenga en cuenta también que lo que realmente quiero es mostrar los mensajes en color verde o rojo. Si el nombre de usuario está disponible, entonces verde en color rojo.

Answer 1

Haría esto usando jQuery y hacer que la página PHP devuelva un código (0 para falso, 1 para verdadero) o similar. Luego puede usar el método addClass () de jQuery dependiendo del resultado devuelto, todo en el javascript.

Answer 2

¿Qué tal si ajax.php devuelve un poco de HTML pre-formateado y usa la función statechange_username, que ha configurado para procesar la respuesta, para pegarla en un marcador de posición div / span?

Por cierto, ¿por qué está configurando una variable de sesión?

Answer 3

Supongo que te falta la función statechange_username, algo así como

function statechange_username() 
{ 
    if (http.readyState==4)
    { 
        document.getElementById(\"username_eixsts\").innerHTML=http.responseText;
    }
}