Discussion :

[enterprise]

Bonjour,

Je commence à m'intéresser au Javascript et à l'Ajax, et j'aurais besoin de votre aide précieuse.

j'ai un formulaire pour créer un employé, je veux que quand l'utilisateur renseigne un nom et un prénom, il puisse cliquer sur un bouton, qui va générer un login, et l'afficher dans un champ.
Je veux vérifier que ce login n'existe pas dans ma BDD, s'il existe, je lui ajoute un chiffre.

Mon problème, c'est qu'il ne se passe rien lorsque je clique sur le bouton générer....

voici ma page avec le code html et JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<script type="text/javascript">
 
 
function request(callback) {
  var xhr = getXMLHttpRequest();
 
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
      callback(xhr.responseText);
    }
  };
 
  var nom = encodeURIComponent(document.getElementById("inputFirstname").value);
  var prenom = encodeURIComponent(document.getElementById("inputLastname").value);
  var login=prenom.substring(0,1)+nom; //concatenation du nom et prénom avec juste la première lettre du prénom
 
// envoie de la variable login a la page de traitement php avec la methode post
xhr.open("POST", "esp_Rh/create_login.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("login=" + login);
}
 
function readData(oData) {
  var nodes   = oData.getElementsByTagName("item"); // récuperer  les infos au format xml dans la page de traitement php
  document.getElementById('inputIdentifiant').value=nodes; //donner la valeur contenu dans nodes à mon input identifiant
}
 
</script>
 
 
<form method="post" action="esp_Rh/addUser.php" id="formulaire">
 
    <div class="form-row">
      <div class="form-group col-md-6">
        <label><b>Nom</b></label>
        <input type="text" class="form-control" id="inputFirstname" placeholder="Entrer le nom de l'utilisateur" name="firstname" required>
      </div>
      <div class="form-group col-md-6">
        <label><b>Prénom</b></label>
        <input type="text" class="form-control" id="inputLastname" placeholder="Entrer le prénom de l'utilisateur" name="lastname" required>
      </div>
 
    </div>
 
  <div class="form-row">
    <div class="form-group col-md-6">
      <label><b>Email</b></label>
      <input type="email" class="form-control" id="inputEmail" placeholder="exemple@mail.fr" name="email">
    </div>
    <div class="form-group col-md-6">
      <label ><b>Confirmer l'Email</b></label>
      <input type="email" class="form-control" id="inputEmail2" placeholder="exemple@mail.fr" name="email2">
     </div>
     </div>
    <div class="form-row">
     <div class="form-group col-md-6">
      <label><b>Mot de passe</b></label>
      <input type='text' class="form-control" id='res' value='' readonly="readonly" name="password" required>
      <input type="button" class="btn" onclick="generatepwd()" value = "generation" />
    </div>
    <div class="form-group col-md-6">
        <label><b>Identifiant</b></label>
        <input type="text" class="form-control" id="inputIdentifiant" value='' readonly="readonly" name="username"  required>
        <input type="button" class="btn" onclick="request(readData);" value = "generation" />
    </div>
  </div>
 
 
</form>

Voici ma page de traitement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<?php 
 
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<list>";
 
$login = (isset($_POST["login"])) ? htmlentities($_POST["login"]) : NULL;
 
function check_statut () //fonction pour vérifier que le login n'exsite pas dans la BDD
	{
 
	$requete = "SELECT count(*) FROM users where 
              login = '".$login."'  ";
    $bdd = include '../db_mysql.php';
    $exec_requete = $bdd->query($requete);
    $reponse = $exec_requete->fetch(PDO::FETCH_ASSOC);
    $resultat = $reponse['count(*)'];
 
    return $resultat;
}
 
function return_login () 
	{
 
 
	if($login) { //on verifie que notre variable ne soit pas vide
 
		if ($result_log !=0) // si la fonction nous retour un count différent de 0 c'est que le login existe
		{
			$login = 'patate'; // du coup ici on change le login
			check_statut(return_login); // ici on boucle jusqu'a ce que le login ne soit pas dans la BDD
	 		echo "<item id=\"" . $login . "\" name=\"" . $login . "\" />";
		}
		else {
			echo "<item id=\"" . $login . "\" name=\"" . $login . "\" />";
		}
 
	}else {
			echo "<item id=\" vide \" name=\"vide\" />";
		}
}
return_login();
echo "</list>";
 
?>

Si quelqu'un a une idée.. Merci

[mathieu]

cela ne nous suffit pas pour vous aider, merci d'indiquer à chaque fois :

1. ce que vous avez mis en place
2. le résultat que vous obtenez avec l'affichage des variables qui ne contiennent pas l'information prévue
3. le résultat que vous auriez souhaité

pour suivre les appels AJAX, vous pouvez utiliser l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

[valaendra]

Bonjour,

Je n'ai regardé que la partie PHP:

La variable $login n'est pas accessible dans vos 2 fonctions car elle est déclarée à l'extérieur.

Déclarer la variable en global ("php.net::global") à l'intérieur de vos fonctions (même si ce n'est pas forcément une bonne pratique).

Je vous invite également à sécuriser vos requêtes SQL grâce aux requêtes préparées faciles d'accès avec PDO. Pour ce faire, je vous invite à consulter l'excellent tuto: https://fmaz.developpez.com/tutoriel...omprendre-pdo/

Dernière chose: ligne 32 l'appel à la fonction check_statut() est à revoir notamment le paramètre envoyé [return_login] qui sort de nulle part.

[enterprise]

Bonjour Mathieu,

1) ce que j'ai mis en place?... C'est à dire?
2) Le résultat que j'obtiens il me semble l'avoir dit, il ne se passe rien... C'est comme si il n'y avait pas de javascript.
3) Le résultat que j'aurais souhaité je l'ai dis aussi il me semble, je veux générer un login quand l'utilisateur clique sur un bouton.
4) voici ce que j'obtiens:
Je me suis peut-être mal exprimé mais j'ai expliqué tout ce que vous me demander ^^

[enterprise]

Bonjour Valaendra,

1) MERCI, je ne savais pas que les variables globales n'étais pas accessible dans les fonctions.
2) C'est vrai que j'ai fais la requête à la va vite, je vais la refaire mais elle devrait fonctionner quand même non?
3) Comment fait on pour appeler une fonction du coup? je voulais appeler check_statut qui elle même appelle return_login.

[Invité]

Bonjour,

ton "fichier de traitement" est un ramassis d'inepties...

Essaie ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php 
header('Content-type:application/json; charset=UTF-8');	// encodage UTF-8
 
$bdd = include '../db_mysql.php';
 
$login = (isset($_POST["login"])) ? htmlentities($_POST["login"]) : '';
 
function check_statut( $login ) //fonction pour vérifier que le login n'existe pas dans la BDD
{
	global $bdd;
	$requete = "SELECT count(*) as total FROM users WHERE login = ? ";
	$exec_requete = $bdd->prepare($requete);
	$exec_requete->execute( array($login) );
	$reponse = $exec_requete->fetch(PDO::FETCH_ASSOC);
	$total = $reponse['total'];
 
	return $total;
}
 
if( !empty($login) )  //on verifie que notre variable ne soit pas vide
{
	$ii = 1;
	$login_check = $login;
	while( check_statut( $login_check ) > 0 ) // si la fonction nous retour un count différent de 0 c'est que le login existe
	{
		$login_check = $login . $ii; // du coup ici on change le login
		$ii++;
	}
	$login = $login_check;
}
 
echo json_encode($login);

Et ça, ce n'est QUE la partie PHP !!

Pour Ajax, je t'invite à LIRE et à FAIRE L'EXERCICE de :

• Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

[enterprise]

Bonjour,

Ah oui tu m'as quasiment tout changé... Mon "fichier de traitement" était si horrible que ça?

Pour la partie AJAX, j'avais suivi un cour en ligne sur un autre site mais visiblement je ne suis pas au niveau, je vais faire l'exercice que tu m'as donné!

Merci beaucoup, je reposte quand j'aurais réussi

[Invité]

ASTUCE : Tu peux TESTER ton fichier de traitement, en l'affichant directement dans la barre d'adresse.

Pour tester un login, il suffit d'écrire APRES la ligne 6 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$login = 'toto'; // OU un login DEJA existant (pour voir si ça affiche bien l'incrémentation)

[enterprise]

Merci de l'info

Et je viens de tester, tu es un géni, ça fonctionne!

Ps: je suis en phase de test, et toto était un utilisateur existant

[enterprise]

Bonjour,

Après avoir passer des heures à chercher et analyser des codes, je n'ai strictement rien compris.
J'ai réussi à faire quelque chose qui marche, j'obtiens ce que je voulais, mais je n'ai rien compris...
je crois, j'ai bien dis je crois, que c'est le 'DOM' que je ne comprends pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<script type="text/javascript">
      function getXhr(){
                                var xhr = null; 
        if(window.XMLHttpRequest) // Firefox et autres
           xhr = new XMLHttpRequest(); 
        else if(window.ActiveXObject){ // Internet Explorer 
           try {
                      xhr = new ActiveXObject("Msxml2.XMLHTTP");
                  } catch (e) {
                      xhr = new ActiveXObject("Microsoft.XMLHTTP");
                  }
        }
        else { // XMLHttpRequest non supporté par le navigateur 
           alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
           xhr = false; 
        } 
                                return xhr;
      }
 
      // Node cleaner
      function go(c){
        if(!c.data.replace(/\s/g,''))
          c.parentNode.removeChild(c);
      }
 
      function clean(d){
        var bal=d.getElementsByTagName('*');
 
        for(i=0;i<bal.length;i++){
          a=bal[i].previousSibling;
          if(a && a.nodeType==3)
            go(a);
          b=bal[i].nextSibling;
          if(b && b.nodeType==3)
            go(b);
        }
        return d;
      } 
 
      /**
      * Méthode qui sera appelée sur le click du bouton
      */
      function gophp(){
        var xhr = getXhr();
        // On défini ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function(){
          // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
          if(xhr.readyState == 4 && xhr.status == 200){
            reponse = clean(xhr.responseXML.documentElement);
            alert(reponse.getElementsByTagName("message")[0].firstChild.nodeValue);
            leselect = reponse.getElementsByTagName("message")[0].firstChild.nodeValue;
            document.getElementById('inputIdentifiant').value=leselect;
          }
        }
        xhr.open("POST","esp_Rh/create_login.php",true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
var nom = document.getElementById("inputFirstname").value;
 var prenom = document.getElementById("inputLastname").value;
      var login=prenom.substring(0,1)+nom;
      alert(login);
        xhr.send("login="+login);
 
      }
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php 
header('Content-type:application/json; charset=UTF-8');	// encodage UTF-8
 
$bdd = include '../db_mysql.php';
 
 $login = (isset($_POST["login"])) ? htmlentities($_POST["login"]) : '';
 
 
function check_statut( $login ) //fonction pour vérifier que le login n'existe pas dans la BDD
{
	global $bdd;
	$requete = "SELECT count(*) as total FROM users WHERE login = ? ";
	$exec_requete = $bdd->prepare($requete);
	$exec_requete->execute( array($login) );
	$reponse = $exec_requete->fetch(PDO::FETCH_ASSOC);
	$total = $reponse['total'];
 
	return $total;
}
 
if( !empty($login) )  //on verifie que notre variable ne soit pas vide
{
	$ii = 1;
	$login_check = $login;
	while( check_statut( $login_check ) > 0 ) // si la fonction nous retour un count différent de 0 c'est que le login existe
	{
		$login_check = $login . $ii; // du coup ici on change le login
		$ii++;
	}
	$login = $login_check;
}
   $buffer  = '<?xml version="1.0"?>';
   $buffer .= "<reponse><message>".$login."</message></reponse>";
 
   header('Content-Type: text/xml');
   echo $buffer;
//echo json_encode($login);
?>

Enfin bref, ça marche, c'est déjà ça! merci pour ton aide.

[Invité]

Bonjour,

rassure-toi : je ne comprends rien à ton code non plus...

Il est inutilement compliqué.
Il n'y a AUCUN intérêt à passer ici par une structure de fichier XML.

[enterprise]

Alors ça va si toi aussi tu ne comprends pas

Enfaite, c'est surtout cette ligne qui est compliqué pour moi à comprendre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

leselect = reponse.getElementsByTagName("message")[0].firstChild.nodeValue;

C'est elle qui me permet de stocker mon login pour ensuite que je l'insère dans la valeur d'un input.

Je sais! je voulais faire un truc avec Json puisque tu m'avais aiguillé sur cette piste avec le fichier de traitement, mais je n'y arrivais pas

[Invité]

Tu ne récupères qu'UNE SEULE donnée.
Donc : pas besoin de XML, ni de json ici.

create_login.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php 
header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
 
$bdd = include '../db_mysql.php';
 
$login = (isset($_POST["login"])) ? $_POST["login"] : '';
 
function check_statut( $login ) //fonction pour vérifier que le login n'existe pas dans la BDD
{
	global $bdd;
	$requete = "SELECT count(*) as total FROM users WHERE login = ? ";
	$exec_requete = $bdd->prepare($requete);
	$exec_requete->execute( array($login) );
	$reponse = $exec_requete->fetch(PDO::FETCH_ASSOC);
	$total = $reponse['total'];
 
	return $total;
}
 
if( !empty($login) )  //on verifie que notre variable ne soit pas vide
{
	$ii = 1;
	$login_check = $login;
	while( check_statut( $login_check ) > 0 ) // si la fonction nous retour un count différent de 0 c'est que le login existe
	{
		$login_check = $login . $ii; // du coup ici on change le login
		$ii++;
	}
	$login = $login_check;
}
 
echo $login; // on renvoie juste la donnée

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
	function getXhr(){
		var xhr = null; 
		if(window.XMLHttpRequest) // Firefox et autres
			xhr = new XMLHttpRequest(); 
		else if(window.ActiveXObject){ // Internet Explorer 
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else { // XMLHttpRequest non supporté par le navigateur 
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr = false; 
		} 
		return xhr
	}
 
	/**
	* Méthode qui sera appelée sur le click du bouton
	*/
	function gophp()
	{
		// on récupère les données nécessaires
		var nom = document.getElementById("inputFirstname").value;
		var prenom = document.getElementById("inputLastname").value;
		var login = prenom.substring(0,1)+nom;
 
		// On défini ce qu'on va faire quand on aura la réponse
		var xhr = getXhr();
		xhr.onreadystatechange = function(){
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				var the_login = xhr.responseText;
				document.getElementById('inputIdentifiant').value = the_login;
			}
		}
 
		// on envoie les données au fichier PHP externe
		xhr.open("POST","esp_Rh/create_login.php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send("login="+login);
	}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

        <input type="button" class="btn" onclick="gophp();" value="generation" />

[enterprise]

J'avais déjà essayé avec ces deux lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        var the_login = xhr.responseText;
        document.getElementById('inputIdentifiant').value = the_login;

Et ça n'avait pas marché!!

La je viens d'essayer ton code en faisant copier coller, et ça marche impeccable

Donc si je comprends bien, quand je n'ai qu'une seule donnée à récupérer, je fais comme dans ce que tu m'as donné, et si je dois récupérer plusieurs données, j'utilise le XML?

Merci Beaucoup en tout cas!

[Invité]

Pour aller plus loin...

Supposons que tu aies besoin de récupérer plusieurs valeurs : on peut le faire en json.

Exemple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?php 
header('Content-type:application/json; charset=UTF-8');	// encodage UTF-8
$retour = array();
.....
 
$retour['login'] = $login;
$retour['statut'] = 'succès';
echo json_encode($retour); // on renvoie les valeurs sous forme de json : { login: "toto", statut: "succès" }

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	function gophp()
	{
....
 
		// On défini ce qu'on va faire quand on aura la réponse
		var xhr = getXhr();
		xhr.onreadystatechange = function(){
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				var retour = JSON.parse( xhr.response ); // retour json
				document.getElementById('inputIdentifiant').value = retour.login;
				alert( retour.statut + ' : '+ retour.login );
			}
		}
....
	}

Voir JSON.parse().



REMARQUE : il faut VRAIMENT LIRE LE TUTO !!
Pas juste le "parcourir"...
Sinon, c'est normal que tu ne comprennes rien, ou mal.

[enterprise]

Ton exemple est très clair, j'ai réussi à le mettre en pratique!

Merci beaucoup, c'est génial!

Je n'ai pas lu ce tuto sur le JSON, par contre j'avais bien lu les autres pour XML et XMLHttpRequest, je pense que le problème est que je n'ai pas de bonnes bases, et qu'il faut que je reprenne du début certaines choses

[Invité]

Je parlais de CE TUTO :

Pour Ajax, je t'invite à LIRE et à FAIRE L'EXERCICE de :

• Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

Si tu le parcours "à la va-vite", tu ne comprendras rien.


Il te faut juste un peu de pratique : fais des petits EXERCICES, SIMPLES.

N.B. Si tu es amené à utiliser jQuery, tu verras que la syntaxe est largement simplifiée !
Voir : jQuery.ajax()

Mais AVANT, il est préférable de BIEN comprendre le fonctionnement, en JavaScript pur.