Disponibilité Pseudo en Ajax

Disponibilité Pseudo en Ajax - PHP - Programmation

Marsh Posté le 03-02-2008 à 17:26:41    

Salut, je me suis mis peu à peu a l'Ajax, et je rencontre quelques problèmes... :o
 
Mon but est de vérifier la disponibilité d'un pseudo lors de l'inscription (A chaques carractère entré)
Mon problème, c'est que çà n'a pas l'air de fonctionner:
 
Inscription.php (Je ne met que le principale):

Code :
  1. <?php
  2. include("haut.php" );#------J'y inclut script.js------#
  3. echo'<br><center><b>Inscription</b></center>';
  5. if ($_SESSION['identification'] != 'OK')## Si l'utilisateur n'est pas connecté
  6. {
  7.         ##CONEXION  BDD
  8.         if (!$_GET['inscription'])## Premier affichage
  9.         {
  10.         $Sselecpseudo = mysql_query("SELECT pseudo FROM pixelmembres" );
  11.         while ($selecpseudo = mysql_fetch_array($Sselecpseudo))
  12.         {
  13.                 $pseudodonne = strtolower($selecpseudo['pseudo']);
  14.                 $pseudopost = strtolower($_POST['Ipseudo']);
  15.                 if($pseudodonne == $pseudopost){$dispo = 'no';}
  16.         }
  17.         if($dispo == 'no'){$colorpseudo = 'red';}else{$colorpseudo = 'green';}
  18.         echo'<br><br><br><form action="inscription.php?inscription=1" method="post">
  19.         Pseudo:<span style="margin-left:106px;"><input style="border-color: '.$colorpseudo.';" type="text" id="Ipseudo" name="Ipseudo" maxlength="25" onKeyUp="return envoiPost();" /> *</span>';
  20.         echo'<br>
  21.         Mot de passe:<span style="margin-left:70px;"><input type="password" name="Imotdepasse" maxlength="25" /> *</span><br>
  22.         Retapez le Mot de passe:<span style="margin-left:5px;"><input type="password" name="Iconfmotdepasse" maxlength="25" /> *</span><br>
  23.         E-mail:<span style="margin-left:110px;"><input type="text" name="Iemail" maxlength="25" /></span><br>
  24.         Sexe:<span style="margin-left:115px;">
  25.                  <select name="Isexe">
  26.                  <option value="Masculin">Masculin</option>
  27.                  <option value="Feminin">Feminin</option>
  28.                  </select> *</span><br>
  29.         Couleur du pixel:<span style="margin-left:49px;">
  30.                                          <select name="Icouleur">
  31.                                          <option value="noir">Noir</option>
  32.                                          <option value="blanc">Blanc</option>
  33.                                          <option value="marron">Marron</option>
  34.                                          <option value="violet">Violet</option>
  35.                                          <option value="bleu">Bleu</option>
  36.                                          <option value="rouge">Rouge</option>
  37.                                          <option value="orange">Orange</option>
  38.                                          <option value="jaune">Jaune</option>
  39.                                          <option value="vert">Vert</option>
  40.                                          <option value="rose">Rose</option>
  41.                                          </select> *</span><br><br>
  42.         <input style="height: 21px;" type="submit" value="Valider" />
  43.         </form>';
  44.         }
  45. }
  46. else## Sinon si l'utilisateur est connécté
  47. {
  48. echo '<br><br>Vous êtes déjà inscrit !';
  49. }
  51. include("bas.php" );
  52. ?>


 
script.js:

Code :
  1. /**
  2.   *   INITIALISATION DE l'AJAX
  3.   **/ 
  4. function ajaxInit()
  5. {
  6.     // ========================================================================================
  7.      // ============== Initialisation de la classe permettant de faire de l'AJAX ===============
  8.      // ========================================================================================
  9.  
  10.  
  11.     if (window.XMLHttpRequest) { // Mozilla, Safari,...
  12.        httpReq = new XMLHttpRequest();
  13.        if (httpReq.overrideMimeType) {
  14.         httpReq.overrideMimeType('text/xml');
  15.        }
  16.     } else if (window.ActiveXObject) { // IE
  17.       try {
  18.         httpReq = new ActiveXObject("Msxml2.XMLHTTP" );
  19.      } catch (e) {
  20.          try {
  21.             httpReq = new ActiveXObject("Microsoft.XMLHTTP" );
  22.            } catch (e) {}
  23.      }
  24.     }
  25.    if (!httpReq) {
  26.        alert('Cannot create XMLHTTP instance');
  27.        return false;
  28.     }
  29.     // ----------------------------------------------------------------------------------------
  30.     // ============ Fin Initialisation de la classe permettant de faire de l'AJAX =============
  31.     // ----------------------------------------------------------------------------------------
  32. }
  34. /**
  35. *   ENVOI DU POST EN AJAX
  36. **/
  37. function envoiPost()
  38. {
  39.     // Initialisation de l'ajax
  40.    ajaxInit();
  41.  
  42.    var texte = document.getElementById("Ipseudo" ).value;
  43.    var url = "inscription.php";
  44.  
  45.     var post = texte;
  46.  
  47.     // =================================================
  48.    // ========== Execution de la requete ==============
  49.    // =================================================
  50.  
  51.    httpReq.onreadystatechange = resultatPost;
  53.     httpReq.open('POST', url, true); //envoi POST
  54.     httpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded" );
  55.    httpReq.setRequestHeader("Content-length", post.length); // taille du post envoyé
  56.     httpReq.setRequestHeader("Connection", "close" );
  57.    httpReq.send(post);
  59.     // -------------------------------------------------
  60.     // ======== Fin Execution de la requete ============
  61.    // -------------------------------------------------
  62.  
  63.     return false; // empeche le rechargement de la page
  64. }
  66. /**
  67. *   RESULTAT RETOURNE PAR LA REQUETE
  68. **/
  69. function resultatPost() {
  70.     // ============================================================
  71.    // ========== test sur l'execution de la requete ==============
  72.     // ============================================================
  74.     if (httpReq.readyState == 4) {
  75.        if (httpReq.status == 200) {
  76.          var postResult = httpReq.responseText;
  78.          document.getElementByTagName("body" ).innerHTML = postResult; // affichage du resultat
  79.       } else {
  80.          alert('Un problème est survenu avec la requête.');
  81.       }
  82.     }
  84.    // ------------------------------------------------------------
  85.     // ======== Fin test sur l'execution de la requete ============
  86.     // ------------------------------------------------------------
  87. }


 
Voilà, mon problème c'est que le cadre reste vert alors qu'il devrait passer au rouge lorsque je rentre un pseudo déjà existant.
 
Effet: http://www.face-cachee.com/Pixel-M [...] iption.php
 
Merci de m'aider... :)

Reply

Marsh Posté le 03-02-2008 à 17:26:41   

Reply

Marsh Posté le 03-02-2008 à 22:09:41    

On commence par créer une table de test :

Code :
  1. CREATE TABLE membre
  2. (
  3.     id    INTEGER    NOT NULL PRIMARY KEY,
  4.     pseudo    VARCHAR(20)    NOT NULL
  5. );
  6.  
  7. INSERT INTO membre VALUES ('1', 'CyberDenix');
  8. INSERT INTO membre VALUES ('2', 'CyberDavid');
  9. INSERT INTO membre VALUES ('3', 'Cyber');


 
Puis un script php :

Code :
  1. <?php
  2.  
  3. mysql_connect('localhost', 'root', '');
  4. mysql_select_db('test');
  5.  
  6. $result = mysql_query("SELECT pseudo FROM membre WHERE pseudo='".$_GET['pseudo']."'" );
  7. if (mysql_num_rows($result) >= 1)
  8.   echo '1';
  9. else
  10.   echo '0';
  11.  
  12. ?>


 
Et enfin un fichier html qui contient du javascript, afin de scruter les évènements client :

Code :
  1. <html>
  2. <head>
  3.   <title>AJAX</title>
  4.   <script type='text/javascript'>
  5.  
  6.     function writediv(texte) {
  7.       document.getElementById('pseudobox').innerHTML = texte;
  8.     }
  9.  
  10.     function verifPseudo(pseudo) {
  11.       if (pseudo != '') {
  12.         if (pseudo.length < 2)
  13.           writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est trop court</span>');
  14.         else if (pseudo.length > 20)
  15.           writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est trop long</span>');
  16.         else if (texte = file('./verifpseudo.php?pseudo='+escape(pseudo))) { // C'est ici que tout se joue !
  17.           if (texte == 1)
  18.             writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est deja pris</span>');
  19.           else if(texte == 0)
  20.             writediv('<span style="color:#1A7917"><b>'+pseudo+' :</b> ce pseudo est libre</span>');
  21.           else
  22.             writediv(texte);
  23.         }
  24.       }
  25.     }
  26.  
  27.     function file(fichier) {
  28.       if (window.XMLHttpRequest) // FIREFOX
  29.         xhr_object = new XMLHttpRequest();
  30.       else if(window.ActiveXObject) // IE
  31.         xhr_object = new ActiveXObject("Microsoft.XMLHTTP" );
  32.       else
  33.         return(false);
  34.       xhr_object.open("GET", fichier, false);
  35.       xhr_object.send(null);
  36.       if (xhr_object.readyState == 4) 
  37.         return xhr_object.responseText;
  38.       else 
  39.         return false;
  40.     }
  41.  
  42.   </script>
  43. </head>
  44.  
  45. <body>
  46.   <form action=''>
  47.     <input type='text' name='pseudo' onKeyUp="verifPseudo(this.value)" />
  48.     <div id='pseudobox'></div>
  49.   </form>
  50. </body>
  51. </html>


 
C'est un code de base, mais tu peux très rapidement l'étoffer  :sol:


Message édité par CyberDenix le 03-02-2008 à 22:15:17

---------------
Directeur Technique (CTO)
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed