[PHP / AJAX]: Change la couleur du message en fonction du texte saisi

Question

Sur la page d'accueil de mon site Web, j'ai un nouveau formulaire d'inscription. Il contient un champ & "Nom d'utilisateur &". Lorsque l'utilisateur entre le nom d'utilisateur et que le focus est dirigé sur un autre champ, un code AJAX est exécuté pour vérifier si un utilisateur avec le nom d'utilisateur entré existe déjà ou non.

Le code AJAX que j'utilise est le suivant:

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

Le fichier " AJAX.PHP " appelé par le code ci-dessus, est comme ça:

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

Dans mon formulaire d'inscription, juste en dessous de la zone de saisie du nom d'utilisateur, je souhaite définir une section dans laquelle je peux afficher les messages:

Un utilisateur portant ce nom existe ou

Le nom d'utilisateur est disponible.

Dans ma page d'accueil, j'utilise le code suivant:

<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 page d'accueil comprend le code ci-dessus et le premier bloc de code (JavaScript) que j'ai indiqué en haut.

Ce code ne fonctionne pas. Et je suppose que la raison en est que j’ai inclus les messages dans le bloc PHP. En tant que serveur, il ne montre pas les messages.

S'il vous plaît laissez-moi savoir comment gérer ce problème. Que ce soit pour modifier le code JavaScript qui appelle AJAX ou inclure quelque chose dans PHP.

Veuillez également noter que ce que je souhaite réellement, c’est d’afficher les messages en vert ou en rouge. Si le nom d'utilisateur est disponible, le vert est de couleur rouge.

Answer 1

Je le ferais avec jQuery et la page PHP renverrait un code (0 pour faux, 1 pour vrai) ou similaire. Vous pouvez ensuite utiliser la méthode addClass () de jQuery en fonction du résultat renvoyé, le tout en javascript.

Answer 2

Pourquoi ne pas demander à ajax.php de renvoyer un peu de code HTML préformaté et d’utiliser la fonction statechange_username, que vous avez définie pour traiter la réponse, afin de la coller dans un espace réservé div / span?

Au fait, pourquoi définissez-vous une variable de session?

Answer 3

Je suppose que vous manquez la fonction statechange_nom_utilisateur, quelque chose comme

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