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


 
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. }
  33. /**
  34. *   ENVOI DU POST EN AJAX
  35. **/
  36. function envoiPost()
  37. {
  38.     // Initialisation de l'ajax
  39.    ajaxInit();
  40.  
  41.    var texte = document.getElementById("Ipseudo" ).value;
  42.    var url = "inscription.php";
  43.  
  44.     var post = texte;
  45.  
  46.     // =================================================
  47.    // ========== Execution de la requete ==============
  48.    // =================================================
  49.  
  50.    httpReq.onreadystatechange = resultatPost;
  51.     httpReq.open('POST', url, true); //envoi POST
  52.     httpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded" );
  53.    httpReq.setRequestHeader("Content-length", post.length); // taille du post envoyé
  54.     httpReq.setRequestHeader("Connection", "close" );
  55.    httpReq.send(post);
  56.     // -------------------------------------------------
  57.     // ======== Fin Execution de la requete ============
  58.    // -------------------------------------------------
  59.  
  60.     return false; // empeche le rechargement de la page
  61. }
  62. /**
  63. *   RESULTAT RETOURNE PAR LA REQUETE
  64. **/
  65. function resultatPost() {
  66.     // ============================================================
  67.    // ========== test sur l'execution de la requete ==============
  68.     // ============================================================
  69.     if (httpReq.readyState == 4) {
  70.        if (httpReq.status == 200) {
  71.          var postResult = httpReq.responseText;
  72.          document.getElementByTagName("body" ).innerHTML = postResult; // affichage du resultat
  73.       } else {
  74.          alert('Un problème est survenu avec la requête.');
  75.       }
  76.     }
  77.    // ------------------------------------------------------------
  78.     // ======== Fin test sur l'execution de la requete ============
  79.     // ------------------------------------------------------------
  80. }


 
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.  
  5. $result = mysql_query("SELECT pseudo FROM membre WHERE pseudo='".$_GET['pseudo']."'" );
  6. if (mysql_num_rows($result) >= 1)
  7.  echo '1';
  8. else
  9.  echo '0';
  10.  
  11. ?>


 
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