AJAX : besoin d'expertise

**kondor76** · 10/09/2015, 08h39

Alors voila, je rame..... trop de comportement que je ne comprends pas dans mon projet malgré des tutos sur le web:

Je vous liste ce que j'attends de mon dev et après les source:
1- Lorsque je charge mon site, les champs pseudo ou id et password se pré-remplissent sans que je sache pourquoi...
2- Le principal problème vient de l'enregistrement d'un nouvel utilisateurs:
sur la cette page plusieurs soucis:
1- Les propriété hidden n'ont pas l'aire de marcher: tout les champs s'affichent, sauf ceux pour sélectionner le nom de la rue et le numéro.
2- lorsque je saisie le nom et le prénom de l'utilisateur, la liste déroulantes pour le nom de la rue ne s'affichent pas, et du coup le numéro nom plus.

Bref, qu'est ce que je ne saisie pas???!!!

codes sources:
index.php

Code html :

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
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	</head>
	<title>Copropriété les Trouvères</title>
	<body>
		<div id="header">Site de la copropriété Les Trouvères</div>
		<p>
		<center>Merci de vous authentifier
		<p>
			<form method=post action="connect.php">
    			<p>
    			<label for="pseudo">Pseudo :</label><input name="pseudo" type="text" id="pseudo" />
			<p>
    			<label for="password">Mot de Passe :</label><input type="password" name="password" id="password" />
    			</p>
    			<p><input type="submit" value="Connexion" /></p></form>
    			<a href="./register.php">Pas encore inscrit ?</a> | <a href="./forget_passwd.php"> Mot de passe oublié?</a> 
		</center>
	</body>
</html>

register.php:

Code html :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Copropriété les Trouvères</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<script type="text/javascript">
function cache_champs_form(){
        document.getElementById("nom_rue").style.display="none";
        document.getElementById("num_rue").style.display="none";
        document.getElementById("password").style.display="none";
        document.getElementById("email").style.display="none";
        document.getElementById("telephone").style.display="none";
        document.getElementById("nb_pers_foyer").style.display="none";
        document.getElementById("validation").style.display="none";
}
</script>
<script>
function affiche_list_nom_rue(){
    if (document.getElementById("prenom").lenght==0){
                document.getElementById("nom_rue").style.display="none";
    }
    else{
        document.getElementById("nom_rue").style.display="block";
        var xhr_object = null;
 
        if(window.XMLHttpRequest) // Firefox
            xhr_object = new XMLHttpRequest();
        else if(window.ActiveXObject) // Internet Explorer
            xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
        else
        { // XMLHttpRequest non supporté par le navigateur
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
            return;
        }
        
        xhr_object.onreadystatechange = function(){
            if(xhr_object.readyState == 4)
                eval(xhr_object.responseText);
        }
 
        xhr_object.open("POST", "get_nom_rue.php", true);
        xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //var data = "nom_rue="+escape(list_nom.options[index].value)+"&form="+form.name+"&select=list_num";
        //xhr_object.send(data);
        }
 
    }
        
}
 
function affiche_list_num_rue(form){
    var list_nom = form.elements["nom_rue"];
        var list_num = form.elements["nom_rue"]; 
    var index = list_nom.selectedIndex;
 
    if (index < 1){
                list_num.options.lenght=0;
        document.getElementById("num_rue").style.display="none";
        }
        else
    {
        xhr_object.open("POST", "get_num_rue.php", true);
 
        xhr_object.onreadystatechange = function(){
            if(xhr_object.readyState == 4)
                eval(xhr_object.responseText);
        }
 
        xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        var data = "nom_rue="+escape(list_nom.options[index].value);
        xhr_object.send(data);    
    }
        
}
 
</script>
<body onLoad="cache_champs_form()">
		<div id="header">Site de la copropriété Les Trouvères</div>
		<p>
		<center>Bienvenue sur la page d'enregistrement
		<p>
		<form method=post action="register.php">
		      <p>
	        <div id="nom" class="user_form_reg"><label for="nom">Votre nom :</label><input name="nom" type="text" required /></div>
		<p>
            	<div id="prenom" class="user_form_reg"><label for="prenom">Votre prenom :</label><input name="prenom" type="text" onkeydown="affiche_list_nom_rue()" required /></div>
		<p>
		</div>
                <p>
            <div id="pseudo" class="user_form_reg"><label for="pseudo">Pseudo :</label><input name="pseudo" type="text" required /></div>
                <p>
		<div id="password" class="user_form_reg"><label for="password">Mot de Passe :</label><input type="password" name="password" required /></div>
  		<p>
            	<div id="email" class="user_form_reg"><label for="email">Votre email de contact</label><input name="email" type="text" required /></div>
 		<p>
            	<div id="telephone" class="user_form_reg"><label for="telephone">Votre telephone :</label><input name="telephone" type="text" required /></div> 
		<p>
            	<div id="nb_pers_foyer" class="user_form_reg"><label for="nb_pers_foyer">Nombre de personne composant votre foyer :</label><input name="nb_pers_foyer" type="text" required/></div>
  		<p>
  		<p>
		<div id="validation" class="user_form_reg"><input type="submit" value="Connexion" /></div>
		</form>
</body>
</html>

get_nom_rue.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Copropriété les Trouvères</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="num_rue" class="user_form_reg"><label for="num_rue">Votre rue :</label>
	<select name="num_rue" required />
        <option value="" selected="selected" onchange="affiche_list_num_rue(this.form)"></option>
        <?php
             $db=mysqli_connect("localhost","root","admin","copro_trouveres");
             $nom_rue=$_POST['nom_rue'];
             $req="select num_rue from adresses where nom_rue=\'$nom_rue\'";
             $res=mysqli_query($db,$req);
             while ($row=mysqli_fetch_row($res)){
                 echo"<option name=\"num_rue\" value=\"$row\">$row[0]</option>";
             }
         ?>
</body>

get_num_rue.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Copropriété les Trouvères</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="num_rue" class="user_form_reg"><label for="num_rue">Votre rue :</label>
	<select name="num_rue" required />
        <option value="" selected="selected"></option>
        <?php
             $db=mysqli_connect("localhost","root","admin","copro_trouveres");
             $nom_rue=$_POST['nom_rue'];
             $req="select num_rue from adresses where nom_rue=\'$nom_rue\'";
             $res=mysqli_query($db,$req);
             while ($row=mysqli_fetch_row($res)){
                 echo"<option name=\"num_rue\" value=\"$row\">$row[0]</option>";
             }
         ?>
</body>

Une grand merci d'avance pour votre aide

Kondor76

**NoSmoking** · 10/09/2015, 20h16

Bonjour,
en y regardant de près ton soucis n'a pas grand chose à voir avec Ajax

1- Lorsque je charge mon site, les champs pseudo ou id et password se pré-remplissent sans que je sache pourquoi...

aucune raison d'après le code que tu nous montres.

1- Les propriété hidden n'ont pas l'aire de marcher: tout les champs s'affichent, sauf ceux pour sélectionner le nom de la rue et le numéro.

Non tous les champs sont affichés sauf...et cela est bien normal dans le code de la page register.php il n'existe nulle part d'élément ayant pour ID "nom_rue" ou "num_rue" donc ton script plante et le reste aussi.

2- lorsque je saisie le nom et le prénom de l'utilisateur, la liste déroulantes pour le nom de la rue ne s'affichent pas, et du coup le numéro nom plus.

voir la réponse faite ci dessus.

Il y a bien d'autre chose à dire mais en attendant corrige au moins ces points.

**kondor76** · 16/09/2015, 08h33

Merci NoSmoking,
Je me doute qu'il y a enormément à dire sur le manière de "coder", chose avec laquelle j'ai du mal.
En fait pour tout te dire, je pensais que les id de div nom_rue et num_rue était gérés par les fichiers annexes get_nom_rue.php et get_num_rue.php (J'ai vraiment beaucoup de mal avec toutes ces notions).

Cela s'affiche à présent mais je ne comprend pas comment se font les intéraction avec les autres php du style get_nom_rue.php pour afficher une liste déroulante qui contiendrait le nom des rues.

De plus l'inspecteur d'objet de mon FF balance une erreur du type
SyntaxError: expected expression, got '<' register.php:1:0
SyntaxError: expected expression, got '<' register.php:1:0
que je ne comprends pas ....

voici le nouveau code source de register.php et get_nom_rue.php.

Merci par avance pour l'aide, je suis un peu largué.
register.php

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<html>
<head>
<meta charset="utf-8">
<title>Copropriété les Trouvères</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<script>
function affiche_debut_form(){
	document.getElementById("pseudo").style.display="block";
}
</script>
<script>
function affiche_list_nom_rue(){
    if (document.getElementById("pseudo").lenght==0){
                document.getElementById("nom_rue").style.display="none";
    }
    else{
        var xhr_object = null;
 
        if(window.XMLHttpRequest) // Firefox
            xhr_object = new XMLHttpRequest();
        else if(window.ActiveXObject) // Internet Explorer
            xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
        else
        { // XMLHttpRequest non supporté par le navigateur
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
            return;
        }
 
        xhr_object.onreadystatechange = function(){
            if(xhr_object.readyState == 4)
                eval(xhr_object.responseText);
        }
 
        xhr_object.open("POST", "./get_nom_rue.php", true);
        xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr_object.send(null);
        document.getElementById("nom_rue").style.display="block";
 
    }
 
}
 
function affiche_list_num_rue(form){
    var list_nom = form.elements["nom_rue"];
	var list_num = form.elements["nom_rue"]; 
    var index = list_nom.selectedIndex;
 
    if (index < 1){
		list_num.options.lenght=0;
        document.getElementById("num_rue").style.display="none";
	}
	else
    {
        xhr_object.open("POST", "get_num_rue.php", true);
 
        xhr_object.onreadystatechange = function(){
            if(xhr_object.readyState == 4)
                eval(xhr_object.responseText);
        }
 
        xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        var data = "nom_rue="+escape(list_nom.options[index].value);
        xhr_object.send(data);    
    }
 
}
 
</script>
<body>
		<div id="header">Site de la copropriété Le Trouvère</div>
		<p>
		<center>Bienvenue sur la page d'enregistrement
		<p>
		<form method=post action="register.php" enctype="application/x-www-form-urlencoded">
            <p>
            <div id="pseudo" ><label for="pseudo">Pseudo :</label><input name="pseudo" type="text" onpropertychange="affiche_list_nom_rue()" onkeyup="affiche_list_nom_rue()" onblur="affiche_list_nom_rue()" onchange="affiche_list_nom_rue()" onkeydown="affiche_list_nom_rue()" autocomplete="off" required /></div>
            <p>
            <div id="nom_rue" class="user_form_reg"><label for="nom_rue">Rue :</label><input name="nom_rue" type="select" onpropertychange="affiche_list_num_rue()" onkeyup="affiche_list_num_rue()" onblur="affiche_list_num_rue()" onchange="affiche_list_num_rue()" onkeydown="affiche_list_num_rue()" autocomplete="off" required /></div>
            <p>
            <div id="num_rue" class="user_form_reg"><label for="num_rue">Numéro dans la rue :</label><input name="num_rue" type="select" onpropertychange="affiche_form()" onkeyup="affiche_form()" onblur="affiche_form()" onchange="affiche_form()" onkeydown="affiche_form()" autocomplete="off" required /></div>
            <p>
	        <div id="nom" class="user_form_reg"><label for="nom">Votre nom :</label><input name="nom" type="text" autocomplete="off" required /></div>
		    <p>
            <div id="prenom" class="user_form_reg"><label for="prenom">Votre prenom :</label><input name="prenom" type="text" autocomplete="off" required /></div>
            <p>  
		    <div id="password" class="user_form_reg"><label for="password">Mot de Passe :</label><input type="password" name="password" autocomplete="off" required /></div>
  		    <p>
            <div id="email" class="user_form_reg"><label for="email">Votre email de contact</label><input name="email" type="text" autocomplete="off" required /></div>
 		    <p>
            <div id="telephone" class="user_form_reg"><label for="telephone">Votre telephone :</label><input name="telephone" type="text" autocomplete="off" required /></div> 
		    <p>
            <div id="nb_pers_foyer" class="user_form_reg"><label for="nb_pers_foyer">Nombre de personne composant votre foyer :</label><input name="nb_pers_foyer" type="text" autocomplete="off" required/></div>
  		    <p>
  	 	    <p>
		    <div id="validation" class="user_form_reg"><input type="submit" value="Connexion" /></div>
		</form>
    </center>
</body>
</html>

get_nom_rue.php:

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
 
<html>
<head>
<meta charset="utf-8">
<title>Copropriété les Trouvères</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
        <option value="" selected="selected" onchange="affiche_list_num_rue(this.form)"></option>
        <?php
             $db=mysqli_connect("localhost","root","admin","copro_trouveres");
             $nom_rue=$_POST['nom_rue'];
             $req="select num_rue from adresses where nom_rue=\'$nom_rue\'";
             $res=mysqli_query($db,$req);
             while ($row=mysqli_fetch_row($res)){
                 echo"<option name=\"num_rue\" value=\"$row\">$row[0]</option>";
            }
         ?>
</body>

**NoSmoking** · 16/09/2015, 20h18

Code :

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

1
2
3
4
xhr_object.onreadystatechange = function(){
    if(xhr_object.readyState == 4)
        eval(xhr_object.responseText);
}

quoiqu'il arrive ici tu ne fais RIEN de ton retour !

Cela s'affiche à présent mais je ne comprend pas comment se font les intéraction avec les autres php du style get_nom_rue.php pour afficher une liste déroulante qui contiendrait le nom des rues.

dans ton fichier get_nom_rue.php: tu ne dois retourner que le code du SELECT complet que tu souhaites afficher, par exemple d'après ton code

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
<?php
// on ouvre le SELECT, on met un NAME et l'action sur le ONCHANGE
$retour = "<select name='num_rue' onchange='affiche_list_num_rue(this.form)'>";
 
// on ajoute les OPTIONs
$retour .= "<option value=''></option>";                          // une vide pour autoriser le ONCHANGE selected par défaut
  // on ajoute les OPTIONs après lecture des données dans la base
  $db=mysqli_connect("localhost","root","admin","copro_trouveres");
  $nom_rue=$_POST['nom_rue'];
  $req="select num_rue from adresses where nom_rue=\'$nom_rue\'";
  $res=mysqli_query($db,$req);
  while ($row=mysqli_fetch_row($res)){
    $retour .= "<option value=\" $row \">$row[0]</option>";
  }
 
// on ferme le SELECT
$retour .= "</select>";
// on envoi la totale
echo $retour;
?>

Maintenant dans ta fonction de réception, coté client, on met la responseText dans le conteneur qui va bien.

Code :

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

1
2
3
4
5
  xhr_object.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById('retour').innerHTML = xhr.responseText;
    }
}

**kondor76** · 29/09/2015, 06h52

Merci beaucoup pour ton aide NoSmoking, j'avance à petit pas et comprend les mécanisme au fur et à mesure.

Il y cependant un point qui reste flou:

j'ai bien reformaté mon get_nom_rue.php comme suit:

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
<?php
// on ouvre le SELECT, on met un NAME et l'action sur le ONCHANGE
$retour = "<select name='nom_rue' onchange='affiche_list_num_rue(this.form)' onpropertychange='affiche_list_num_rue()' onkeyup='affiche_list_num_rue()' onblur='affiche_list_num_rue()' onkeydown='affiche_list_num_rue()' autocomplete='off' required>";
 
// on ajoute les OPTIONs
$retour .= "<option value=''></option>";                          // une vide pour autoriser le ONCHANGE selected par défaut
  // on ajoute les OPTIONs après lecture des données dans la base
  $db=mysqli_connect("localhost","root","admin","copro_trouveres");
  $req="select distinct nom_rue from adresses";
  $res=mysqli_query($db,$req);
  while ($row=mysqli_fetch_row($res)){
    $retour .= "<option value=\" $row \">$row[0]</option>";
  }
 
// on ferme le SELECT
$retour .= "</select>";
// on envoi la totale
echo $retour;
?>

et le met dans mon register.php:

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
function affiche_list_nom_rue(){
    if (document.getElementById("pseudo").lenght==0){
                document.getElementById("nom_rue").style.display="none";
    }
    else{
        var xhr_object = null;
 
        if(window.XMLHttpRequest) // Firefox
            xhr_object = new XMLHttpRequest();
        else if(window.ActiveXObject) // Internet Explorer
            xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
        else
        { // XMLHttpRequest non supporté par le navigateur
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
            return;
        }
 
        xhr_object.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200)
                document.getElementById('nom_rue').innerHTML = xhr.responseText;
        }
 
        xhr_object.open("POST", "./get_nom_rue.php", true);
        xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr_object.send(null);
        document.getElementById("nom_rue").style.display="block";
    }        
}

Mon problème est que je n'arrive pas à comprendre comment faire le lien entre cette partie du fichier register.php et son "<body>": je souhaite en effet afficher ma liste déroulante dans ma div "nom_rue":

Code html :

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
<body>
		<div id="header">Site de la copropriété Le Trouvère</div>
		<p>
		<center>Bienvenue sur la page d'enregistrement
		<p>
		<form method=post action="register.php" enctype="application/x-www-form-urlencoded">
            <p>
            <div id="pseudo" class="pseudo_form_reg"><label for="pseudo">Pseudo :</label><input name="pseudo" type="text" onpropertychange="affiche_list_nom_rue()" onkeyup="affiche_list_nom_rue()" onblur="affiche_list_nom_rue()" onchange="affiche_list_nom_rue()" onkeydown="affiche_list_nom_rue()" autocomplete="off" required /></div>
            <p>
            <div id="nom_rue" class="user_form_reg"><label for="nom_rue">Rue :</label></div>
            <p>
            <div id="num_rue" class="user_form_reg"><label for="num_rue">Numéro dans la rue :</label><select name="num_rue" onpropertychange="affiche_form()" onkeyup="affiche_form()" onblur="affiche_form()" onchange="affiche_form()" onkeydown="affiche_form()" autocomplete="off" required /></select></div>
            <p>
	        <div id="nom" class="user_form_reg"><label for="nom">Votre nom :</label><input name="nom" type="text" autocomplete="off" required /></div>
		    <p>
            <div id="prenom" class="user_form_reg"><label for="prenom">Votre prenom :</label><input name="prenom" type="text" autocomplete="off" required /></div>
            <p>  
		    <div id="password" class="user_form_reg"><label for="password">Mot de Passe :</label><input type="password" name="password" autocomplete="off" required /></div>
  		    <p>
            <div id="email" class="user_form_reg"><label for="email">Votre email de contact</label><input name="email" type="text" autocomplete="off" required /></div>
 		    <p>
            <div id="telephone" class="user_form_reg"><label for="telephone">Votre telephone :</label><input name="telephone" type="text" autocomplete="off" required /></div> 
		    <p>
            <div id="nb_pers_foyer" class="user_form_reg"><label for="nb_pers_foyer">Nombre de personne composant votre foyer :</label><input name="nb_pers_foyer" type="text" autocomplete="off" required/></div>
  		    <p>
  	 	    <p>
		    <div id="validation" class="user_form_reg"><input type="submit" value="Connexion" /></div>
		</form>
    </center>
</body>

Mais là je ne vois vraiment pas comment mon script peut être lié à cette div....

Merci pour l'aide si précieuse...(vraiment chiant de pas avoir l'âme d'un développeur)

Kondor6

**NoSmoking** · 29/09/2015, 22h18

Mon problème est que je n'arrive pas à comprendre comment faire le lien entre cette partie du fichier register.php et son "<body>": je souhaite en effet afficher ma liste déroulante dans ma div "nom_rue":

c'est pourtant bien ce que tu fais dans ta fonction ci dessous

Code :

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

1
2
3
4
xhr_object.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200)
        document.getElementById('nom_rue').innerHTML = xhr.responseText;
}

au retour ta xhr.responseText contient le code de ton SELECT que tu place dans l'élément ayant pour ID 'nom_rue'

AJAX : besoin d'expertise

AJAX

Discussions similaires

Partager

Partager