[PHP / AJAX]: cambia il colore del messaggio in base al testo inserito

Question

Nella home page del mio sito Web, ho un nuovo modulo di registrazione utente. Contiene un campo & Quot; Nome utente & Quot ;. Quando l'utente immette il nome utente e lo stato attivo viene puntato su un altro campo, viene eseguito un codice AJAX che verifica se esiste già un utente con il nome utente inserito.

Il codice AJAX che sto usando è questo:

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 = ''; 
    }
}

Il file " AJAX.PHP " chiamato dal codice sopra, è così:

<?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; 
} 
?>

Nel mio modulo di registrazione, proprio sotto la casella di input del nome utente, voglio definire una sezione in cui posso mostrare i messaggi:

Esiste un utente con questo nome o

Il nome utente è disponibile.

Nella mia home page, sto usando il seguente codice:

<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 home page è composta dal codice sopra e dal primo blocco di codice (JavaScript) in cima che ho dato.

Questo codice non funziona. E immagino che il motivo sia che ho incluso i messaggi nel blocco PHP. Essendo lato server, non mostra i messaggi.

Per favore fatemi sapere come gestire questo problema. Se modificare il codice JavaScript che chiama AJAX o includere qualcosa nel PHP.

Si noti inoltre che ciò che effettivamente voglio è mostrare i messaggi in colore verde o rosso. Se il nome utente è disponibile, allora il verde è di colore rosso.

Answer 1

Lo farei usando jQuery e farei in modo che la pagina PHP restituisse un codice (0 per falso, 1 per vero) o simile. È quindi possibile utilizzare il metodo addClass () di jQuery in base al risultato restituito, tutto in javascript.

Answer 2

Che ne dici di avere ajax.php restituire un po 'di HTML pre-formattato e usare la funzione statechange_username, che hai impostato per elaborare la risposta, per inserirla in un div / span segnaposto?

A proposito, perché stai impostando una variabile di sessione?

Answer 3

Suppongo che manchi la funzione statechange_username, qualcosa come

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