Mise à jour sur événement onchange() d'un <select>

**joker93200** · 07/04/2019, 12h10

Bonjour à tous,

un petit aperçu avant d'expliquer mon problème

Nom : pageimg.jpg
Affichages : 1469
Taille : 51,4 Ko

en fait voila, dans FORMATION après la sélection ( <select></select>) du SECTEUR j'aimerais afficher les formations qui sont dans le secteur sélectionné pour les mettre dans un autre <select></select>.

Puis après la sélection de la formation j'aimerais afficher le lieu de cette formation dans le <input type="text">.

ainsi que le Nom/Prénom/Émail des personnes qui s'occupent de cette formation dans la carte Email Assistant/Coordo.

c_ecouteClient.php (le controleur de la page)

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
<?php
 
 include("Vue/accueil/v_menuAccueil.php");
 
 
//action par defaut lorsque ce controleur est demandé
if (!isset($_REQUEST['action'])) {
    $_REQUEST['action'] = 'voirFormEcouteCLient';
}
 
 
$action = $_REQUEST['action'];
switch ($action) {
        case 'voirFormEcouteCLient':{
            //faire une requette. quand je selectionne le secteur cela m'affiche les formations disponibles dans ce secteur
            //pui quand je choisi une formation cela m'affiche le lieu et les membre du greta lier a cette formation
            $lesSecteurs= $pdo->getLesSecteurs();
            $lesMembres = $pdo->getLesMembresGreta();
 
            // $lesFormations = $pdo->getToutLesFormations($nom);
            // $formationParSecteur= $pdo->formationSecteur($idSect);
            include("Vue/accueil/v_ecouteClient.php");
            break;
        }
 
}
 
?>

class.pdo.inc.php (connexion a la bdd et les requêtes)

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
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
class PdoGreta{
 
    private static $serveur='mysql:host=localhost';
    private static $bdd='dbname=greta';
    private static $user='root';
    private static $mdp='' ;
    private static $monPdo;
    private static $monPdoGreta=null;
/**
** Constructeur privé, crée l'instance de PDO qui sera sollicitée
** pour toutes les méthodes de la classe
**/
    private function __construct(){
        PdoGreta::$monPdo = new PDO(PdoGreta::$serveur.';'.PdoGreta::$bdd, PdoGreta::$user, PdoGreta::$mdp);
        PdoGreta::$monPdo->query("SET CHARACTER SET utf8");
    }
 
    public function _destruct(){
        PdoGreta::$monPdo = null;
    }
 
 
/**
   Fonction statique qui crée l'unique instance de la classe
 
   Appel : $instancePdoGreta = PdoGreta::getPdoGreta();
 
   @return l'unique objet de la classe PdoGreta
**/
    public static function getPdoGreta(){
        if(PdoGreta::$monPdoGreta==null){
            PdoGreta::$monPdoGreta= new PdoGreta();
        }
        return PdoGreta::$monPdoGreta;
    }
 
public function getToutLesFormations($nom){
  $req="SELECT formation.id as do,formation.nom as f,fichier,sesconv as nosession,sesnonconv,date_debut,date_fin, recrutement,
    cdpost,ville,effectif,plconv,plnonconv,actconv,actnonconv,level.niveau as lvl,tarif,hcentre,hent,diplm,exp,convention.obj as rep,
    cd,ch,cl,info,secteur.nom as sec,m1.id as idass, m1.nom as an,m1.prenom as ap,m1.tel as at,m1.email as ae,m1.statut as ast,
    m2.id as idcoordo, m2.nom as cn,m2.prenom as cp,m2.tel as ct,m2.email as ce,m2.statut as cs,m3.id as idcfc,m3.nom as cfcn,
    m3.prenom as cfcp,m3.tel as cfct,m3.email as cfce,m3.statut as cfcs
    FROM formation
    JOIN level ON formation.niveau=level.id
    JOIN convention ON formation.convention=convention.id
    JOIN secteur ON formation.secteur=secteur.id
    JOIN membre as m1 ON formation.cfc=m1.id
    JOIN membre as m2 ON formation.ass=m2.id
    JOIN membre as m3 ON formation.coo=m3.id WHERE secteur.nom='$nom'";
    $res = PdoGreta::$monPdo->query($req);
    $form = array();
    $form = $res->fetchAll();
    return $form;
    }
 
public function getLesSecteurs(){
    $req="SELECT id,nom from secteur";
    $res = PdoGreta::$monPdo->query($req);
  $lesLignes = array();
  $lesLignes = $res->fetchAll();
  return $lesLignes;
}
 
public function getIdSecteur(){
    $nomsecteur=$_SESSION['nomSecteur'];
    $req="select id from secteur where nom='$nomsecteur'";
    $res = PdoGreta::$monPdo->query($req);
  $lesLignes = array();
  $lesLignes = $res->fetch();
  return $lesLignes;
 
}<br>}

v_ecouteClient.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
 <!-- Formation -->
                        <div class="card" style="width: 40rem;">
                            <div class="card-body">
                                <h4 class="card-title">Formation <i class="fa fa-graduation-cap" aria-hidden="true"></i></h4>
 
 
                                <div class='form-group input-group'>
                                    <select name="secteur" id="secteur" onchange="chargerFormation" class='form-control' required>
                                        <option disabled selected>Secteur</option>
                                        <?php
                                            foreach ($lesSecteurs as $unSecteur) {
                                            $id= $unSecteur['id'];
                                            $nom = $unSecteur['nom'];
                                            
                                            echo ("<option value=$id>$nom</option>");
                                        }
                                        ?>
                                    </select>
                                </div>
 
 
 
                                <div class='form-group input-group'>
                                    <select name="formation" id="Idformation" class='form-control'>
                                        <option disabled selected>Formation</option>
                                        <?php
                                        
 
                                            foreach ($lesFormations as $uneFormation) {
                                                $idF = $uneFormation['do'];      
                                                $nomF= $uneFormation['f'];
                                                $ville= $uneFormation['ville'];                                               
                                                $assNom= $uneFormation['an'];
                                                $assPrenom= $uneFormation['ap'];
                                                $assTel= $uneFormation['at'];
                                                $assEmail= $uneFormation['ae'];
                                                $cooNom= $uneFormation['cn'];
                                                $cooPrenom= $uneFormation['cp'];
                                                $cooTel= $uneFormation['ct'];
                                                $cooEmail= $uneFormation['ce'];                                             
                                                $sec= $uneFormation['sec'];
                                                $idass= $uneFormation['idass'];
                                                $idcoordo= $uneFormation['idcoordo'];
                                                
                                                echo("<option value=$idF>$nomF</option>");
                                            }
                                        
                                        ?>
                                    </select>
                                </div>
 
                                <div class="form-group input-group">
                                    <input type="text" name="lieu" id="lieu" class="form-control" placeholder="Lieu" >
                                </div>
                            </div>
                        </div>
                    </div> <!-- fin du div formu -->
 
                    <script>
                        function chargerFormation() {
                        var x = document.getElementById("secteur").value;
                        document.getElementById("Idformation").innerHTML = "You selected: " + x;
                        }
                    </script>

j'arrive bien a afficher toutes mes formations dans le premier select mais le probleme est que je n'arrive pas a utiliser le select correctement pour afficher le reste dans les autres parties si quelqu'un peut m'aider ça sera vraiment cool car je ne maîtrise pas du tout ajax et comprends peu le js.

merci d'avance !!!

**Watilin** · 08/04/2019, 00h38

Bonsoir,
Dans ton navigateur, fais Ctrl+U pour voir le code généré. C’est ce code qui est important pour voir ce qui se passe côté client.

D’ailleurs on est sur le forum JavaScript et normalement on ne traite pas de code serveur ici. Mais puisque tu as posté ton PHP, et puisqu’il y a quelques erreurs sévères dedans, je vais quand même en parler.

1. Tu as une vulnérabilité SQL ici :

Code php :

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

$req="select id from secteur where nom='$nomsecteur'";

Je ne sais pas d’où vient la valeur de $_SESSION['nomSecteur'] mais je vais partir du principe qu’elle n’est pas sécurisée. Dans le doute, utilise une requête préparée et tu n’auras pas à te poser la question.

2. Le charset de communication entre PHP et la base SQL :

Code sql :

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

SET CHARACTER SET utf8

Cette façon de faire cause 2 problèmes :

Le utf8 de MySQL est en réalité utf8mb3, un encodage incomplet qui n’utilise que 3 octets, et qui peut causer des pertes de données. À la place, il faut utiliser utf8mb4.
ton objet PDO n’est pas au courant de l’encodage utilisé. À la place, il faut ajouter un paramètre d’encodage au dsn lors de la création de la connexion :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
```
new PDO(PdoGreta::$serveur.';'.PdoGreta::$bdd.';charset=utf8mb4', ...)
```

3. $_REQUEST : c’est une vieux machin de PHP qui signifie à la fois GET et POST. Mais les verbes http GET et POST n’ont pas la même sémantique, et ta page ne devrait pas répondre aux deux (ou au moins, ne pas répondre de la même façon). Il vaut mieux ne jamais utiliser $_REQUEST, et toujours $_GET ou $_POST suivant la situation.

Pour répondre à ta question, regarde le code que génère ta boucle foreach ($lesFormations as $uneFormation) { ... }. Tu y initialises plein de variables mais tu ne les utilises pas. Tu pourrais par exemple les inscrire dans une balise <script> sous forme d’objet JSON :

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
<select name="formation" id="Idformation" class='form-control'>
  <option disabled selected>Formation</option>
</select>
<script> "use strict";
 
<?php
// options JSON : échappe le HTML, les guillemets doubles et simples, et signale les erreurs
$json_options = JSON_HEX_TAG | JSON_HEX_QUOT | JSON_HEX_APOS | JSON_THROW_ON_ERROR;
 
// prépare une version json du tableau $lesFormations
$json_output = json_encode( $lesFormations, $json_options );
 
// écrit le code JavaScript
echo "const lesFormations = $json_output;";
?>
 
</script>

Voir json_encode.

Maintenant, si tu charges ta page, puis ouvres ta console avec la touche F12, puis tapes dans la zone de saisie lesFormations, tu verras quelque chose comme ceci :

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
>> lesFormations
Array(42) [
  0: Object {
    "do": ... ,
    "f": ... ,
    "ville": ... ,
    "an": ... ,
    "ap": ... ,
    "at": ... ,
    "ae": ... ,
    "cn": ... ,
    "cp": ... ,
    "ct": ... ,
    "ce": ... ,
    "sec": ... ,
    "idass": ... ,
    "idcoordo": ... ,
  },
  1: Object {
    "do": ... ,
    "f": ... ,
    "ville": ... ,
    "an": ... ,
    "ap": ... ,
    "at": ... ,
    "ae": ... ,
    "cn": ... ,
    "cp": ... ,
    "ct": ... ,
    "ce": ... ,
    "sec": ... ,
    "idass": ... ,
    "idcoordo": ... ,
  },
  // etc.

Tu peux filtrer sur la propriété "do" avec la méthode .filter() :

Code :

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

lesFormations.filter((obj) => obj["do"] === "Poney")[0] // sélectionne la première formation dont l’id est "Poney"

Cela va nous servir à construire une ou plusieurs balises <option> avec les valeurs qui conviennent. Pour ça, il faut modifier la fonction chargerFormation. Mais d’abord, modifions l’attribut onchange pour le rendre un peu plus utile :

Code html :

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

<select ... onchange="chargerFormation(this)" ... >

Ainsi, la fonction reçoit le <select> en argument et on n’a plus besoin de getElementById().

On refait un filtrage, cette fois sur "sec" pour ne garder que les formations qui correspondent au secteur sélectionné, et ensuite on fait une boucle for...of (c’est l’équivalent JS de foreach). Et on utilise createElement() pour construire les <option>.

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
function chargerFormation(ceSelect) {
  // supprime l’ancien contenu du select id="Idformation"
  const selectFormation = document.getElementById("Idformation");
  selectFormation.textContent = "";
 
  const x = ceSelect.value;
 
  // on va utiliser un fragment de document pour la performance
  const fragment = document.createDocumentFragment();
 
  // construit les nouvelles options
  const secFormations = lesFormations.filter((obj) => obj["sec"] === x); // la syntaxe obj.sec marche aussi
  for (const formation of secFormations) {
    const option = document.createElement("option");
    option.value = formation.do;
    option.textContent = formation.f;
    fragment.appendChild(option);
  }
 
  // ajoute le fragment = ajoute toutes les options d’un coup
  selectFormation.appendChild(fragment);
}

Pour remplir les autres champs, c’est le même principe. N’oublie pas d’ajouter un attribut onchange sur le second select.
Bon courage

**joker93200** · 08/04/2019, 11h31

Envoyé par Watilin

Voir json_encode.

Maintenant, si tu charges ta page, puis ouvres ta console avec la touche F12, puis tapes dans la zone de saisie lesFormations, tu verras quelque chose comme ceci :

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
>> lesFormations
Array(42) [
  0: Object {
    "do": ... ,
    "f": ... ,
    "ville": ... ,
    "an": ... ,
    "ap": ... ,
    "at": ... ,
    "ae": ... ,
    "cn": ... ,
    "cp": ... ,
    "ct": ... ,
    "ce": ... ,
    "sec": ... ,
    "idass": ... ,
    "idcoordo": ... ,
  },
  1: Object {
    "do": ... ,
    "f": ... ,
    "ville": ... ,
    "an": ... ,
    "ap": ... ,
    "at": ... ,
    "ae": ... ,
    "cn": ... ,
    "cp": ... ,
    "ct": ... ,
    "ce": ... ,
    "sec": ... ,
    "idass": ... ,
    "idcoordo": ... ,
  },
  // etc.

Bonjour, merci de m'avoir accordé votre temps !

j'ai corrigé les quelques erreurs que vous m'avez montrés mais j'ai toujours des soucis

voila le résultat que j'obtiens quand j'appelle lesFormations dans la console
Nom : Annotation .jpg
Affichages : 1366
Taille : 156,5 Ko

Nom : Annotation .jpg
Affichages : 1366
Taille : 156,5 Ko

Puis, dans le <select> quand je choisi le secteur les formations ne s'affiche toujours pas

code html: v_ecouteClient.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
<!-- Formation -->
                        <div class="card" style="width: 40rem;">
                            <div class="card-body">
                                <h4 class="card-title">Formation <i class="fa fa-graduation-cap" aria-hidden="true"></i></h4>
 
 
                                <div class='form-group input-group'>
                                    <select name="secteur" id="secteur" onchange="chargerFormation(this)" class='form-control' required>
                                        <option disabled selected>Secteur</option>
                                        <?php
                                            foreach ($lesSecteurs as $unSecteur) {
                                            $id= $unSecteur['id'];
                                            $nom = $unSecteur['nom'];
                                            
                                            echo ("<option value=$id>$nom</option>");
                                        }
                                        ?>
                                    </select>
                                </div>
 
 
                                <div class='form-group input-group'>
                                    <select  name="formation" id="Idformation" class='form-control'>
                                        <option disabled selected>Formation</option>
 
                                        <script> "use strict"; 
                                        <?php
                                        // options JSON : échappe le HTML, les guillemets doubles et simples, et signale les erreurs
                                        $json_options = JSON_HEX_TAG | JSON_HEX_QUOT | JSON_HEX_APOS | JSON_THROW_ON_ERROR;
                                        
                                        // prépare une version json du tableau $lesFormations
                                        $json_output = json_encode( $lesFormations, $json_options );
                                        
                                        // écrit le code JavaScript
                                        echo "const lesFormations = $json_output;";
                                        ?>
                                        
                                        </script>
                                    </select>
                                </div>
 
                                <div class="form-group input-group">
                                    <input type="text" name="lieu" id="lieu" class="form-control" placeholder="Lieu" >
                                </div>
                            </div>
                        </div>
                    </div> <!-- fin du div formu -->
 
                    <script>
                        // script pour charger les formations contenue dans un secteur (avec le <select>) 
                        function chargerFormation(ceSelect) {
                            // supprime l’ancien contenu du select id="Idformation"
                            const selectFormation = document.getElementById("Idformation");
                            selectFormation.textContent = "";
 
                            const x = ceSelect.value;
 
                            // on va utiliser un fragment de document pour la performance
                            const fragment = document.createDocumentFragment();
 
                            // construit les nouvelles options
                            const secFormations = lesFormations.filter((obj) => obj["sec"] === x); // la syntaxe obj.sec marche aussi
                            for (const formation of secFormations) {
                                const option = document.createElement("option");
                                option.value = formation.do;
                                option.textContent = formation.f;
                                fragment.appendChild(option);
                            }
 
                            // ajoute le fragment = ajoute toutes les options d’un coup
                            selectFormation.appendChild(fragment);
                        }
                    </script>

code PHP : c_ecouteClient.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
<?php
 
 include("Vue/accueil/v_menuAccueil.php");
 
 
//action par defaut lorsque ce controleur est demandé
if (!isset($_REQUEST['action'])) {
    $_REQUEST['action'] = 'voirFormEcouteCLient';
}
 
 
$action = $_REQUEST['action'];
switch ($action) {
        case 'voirFormEcouteCLient':{
            //faire une requette. quand je selectionne le secteur cela m'affiche les formations disponibles dans ce secteur
            //pui quand je choisi une formation cela m'affiche le lieu et les membre du greta lier a cette formation
            $lesSecteurs= $pdo->getLesSecteurs();
            $lesMembres = $pdo->getLesMembresGreta();
            $lesFormations = $pdo->getToutLesFormations($nom);
 
            include("Vue/accueil/v_ecouteClient.php");
            break;
        }
}

code php (requête): class.pdogreta.inc.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
public function getToutLesFormations($nom){
  $req="SELECT formation.id as do,formation.nom as f,fichier,sesconv as nosession,sesnonconv,date_debut,date_fin, recrutement,
	cdpost,ville,effectif,plconv,plnonconv,actconv,actnonconv,level.niveau as lvl,tarif,hcentre,hent,diplm,exp,convention.obj as rep,
	cd,ch,cl,info,secteur.nom as sec,m1.id as idass, m1.nom as an,m1.prenom as ap,m1.tel as at,m1.email as ae,m1.statut as ast,
	m2.id as idcoordo, m2.nom as cn,m2.prenom as cp,m2.tel as ct,m2.email as ce,m2.statut as cs,m3.id as idcfc,m3.nom as cfcn,
	m3.prenom as cfcp,m3.tel as cfct,m3.email as cfce,m3.statut as cfcs 
	FROM formation
	JOIN level ON formation.niveau=level.id
	JOIN convention ON formation.convention=convention.id 
	JOIN secteur ON formation.secteur=secteur.id 
	JOIN membre as m1 ON formation.cfc=m1.id
	JOIN membre as m2 ON formation.ass=m2.id
	JOIN membre as m3 ON formation.coo=m3.id WHERE secteur.nom='$nom'";
	$res = PdoGreta::$monPdo->query($req);
	$form = array();
	$form =  $res->fetchAll();  
	return $form;
	}

j'ai encore besoin de vous s'il vous plait (c'est promis j'apprendrais le js

)

et encore merci pour votre aide !

**Watilin** · 08/04/2019, 14h10

D’après ta capture d’écran, il semblerait que json_encode génère un tableau vide. Essaye ceci et montre-moi ce qui s’affiche :

Code php :

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

1
2
$lesFormations = $pdo->getToutLesFormations($nom);
print_r($lesFormations);

**joker93200** · 08/04/2019, 14h41

Envoyé par Watilin

D’après ta capture d’écran, il semblerait que json_encode génère un tableau vide. Essaye ceci et montre-moi ce qui s’affiche :

Code php :

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

1
2
$lesFormations = $pdo->getToutLesFormations($nom);
print_r($lesFormations);

ça me donne toujours le même résultat

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
switch ($action) {
        case 'voirFormEcouteCLient':{
            //faire une requette. quand je selectionne le secteur cela m'affiche les formations disponibles dans ce secteur
            //pui quand je choisi une formation cela m'affiche le lieu et les membre du greta lier a cette formation
            $lesSecteurs= $pdo->getLesSecteurs();
            $lesMembres = $pdo->getLesMembresGreta();
            $lesFormations = $pdo->getToutLesFormations($nom);
            print_r($lesFormations);
            include("Vue/accueil/v_ecouteClient.php");
            break;
        }
}
 
?>

**Watilin** · 08/04/2019, 14h49

Ctrl+U
Je ne veux pas voir ton code PHP.

Mise à jour sur événement onchange() d'un <select>

AJAX

Vue hybride

Discussions similaires

Partager

Partager