[PHP / AJAX]: Farbe ändert der Nachricht nach dem eingegebenen Text

Question

In meiner Homepage der Website, ich habe einen neuen Benutzeranmeldeformular. Es enthält ein Feld „Benutzername“. Wenn der Benutzer den Benutzernamen eingibt und der Fokus auf ein anderes Feld hingewiesen wird ein AJAX-Code ausgeführt, dass überprüft, ob ein Benutzer mit dem eingegebenen Benutzernamen existiert bereits oder nicht.

Der AJAX-Code, ich verwende, ist dies:

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

Die Datei "ajax.php" durch den obigen Code genannt wird, ist wie folgt:

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

In meinem Anmeldeformular direkt unter dem Benutzernamen Eingabefeld, möchte ich einen Abschnitt definieren, wo in ich die Nachrichten zeigen:

Benutzer mit diesem Namen existiert, oder

Benutzername verfügbar ist.

In meiner Homepage, ich bin mit folgendem Code:

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

Die Startseite besteht aus dem obigen Code und der ersten Codeblock (JavaScript) oben, dass ich gegeben habe.

Dieser Code funktioniert nicht. Und ich denke, der Grund ist, dass ich die Nachrichten in dem PHP-Block enthalten würde. Als serverseitige, ist es nicht die Nachrichten zeigt.

Bitte lassen Sie mich wissen, wie dieses Problem zu behandeln. Ob den JavaScript-Code zu ändern, die die AJAX oder ist etwas in der PHP aufruft.

Bitte beachten Sie auch, dass das, was ich eigentlich will, ist die Nachrichten in grün oder rot zu zeigen. Wenn der Benutzername verfügbar ist, dann grün sonst in roter Farbe.

Answer 1

Ich würde dies mit jQuery tun und die PHP-Seite einen Code (0 für falsch, 1 für true) zurückzukehren oder ähnliches. Sie können dann jQuery addClass () -Methode in Abhängigkeit von dem zurückgegebene Ergebnis, alle in der Javascript verwenden.

Answer 2

Wie wäre es mit ajax.php ein bisschen vorformatierte HTML zurückkehren und mit der statechange_username-Funktion, die Sie festgelegt haben, um die Antwort zu verarbeiten, sie in einem Platzhalter div Stick / span?

By the way, warum Sie ein Session-Variable setzen?

Answer 3

Ich denke, Sie vermissen die statechange_username Funktion, so etwas wie

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