Requete apres validation d'un choix issu d'un menu déroulant

Version imprimable

Bonjour,

Débutant dans le développement , pourriez vous m'aiguiller sur le projet que je souhaite réaliser :

Voici les étapes que j'ai réalisé pour le moment :
1 - connexion à une base de donnée ( via la methode PDO )
2 - récupération des données issues de la base ( MSSQL ) dans un menu déroulant. .
id groupe - nom groupe - debut formation - fin formation

je bloque à l'étape 3 :

3 - Lorsque je sélectionne un groupe dans le menu déroulant , je souhaite effectuer une deuxième requête ( déjà prête et fonctionnelle ) qui m'affiche les membres de ce groupe. ( de préférence sans changer de page )

D’après mes premières lecture, il s'agirait de passer par du javascript/JQuery mais j'avoue que je suis perdu après ... Comment feriez vous? Merci.

Voici mon code pour le moment :
Code:

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 <?php $pdo = new PDO("sqlsrv:Server=SRV-TEST\TEST_MSSQL,50000;Database=TESTDATA", "CLIENT", "Password"); if( $pdo ) { echo "Connexion établie.<br />"; }else{ echo "La connexion n'a pu être établie.<br />"; die( print_r( sqlsrv_errors(), true)); } $sql1="select dbo.groupe.nom_groupe AS GROUPE,dbo.calendrier.date_deb AS DEBUT,dbo.calendrier.date_fin AS FIN FROM dbo.GROUPE,dbo.FORMATION,dbo.CALENDRIER WHERE calendrier.DATE_DEB > '20180101' AND calendrier.code_calendrier = groupe.code_calendrier AND groupe.code_formation = formation.code_formation ORDER BY groupe.nom_groupe"; $result1= $pdo->query($sql1); //echo $sql1; echo "<br>"; echo '<select id="CHOIX"> <option value="">Choisir un Groupe</option>'; foreach ($result1 as $CHOIX) { echo '<option value="'.($CHOIX['id']).'">'.$CHOIX['GROUPE']."$nbsp ----- du ".$CHOIX['DEBUT']."$nbsp au: ".$CHOIX['FIN'].'</option>'; } echo '</select>'; $result1->closeCursor(); ?>

Bonjour,

Effectivement, il n'y a pas le choix : il faut passer par un language qui permet de modifier le contenu de la page et donc le Javascript.

Personnellement, je donnerai un exemple qui utilise jQuery, juste parce que je suis plus à l'aise qu'avec du JS natif ;-)

A savoir qu'il existe 2 possibilités :
1. Charger toute la DB au chargement de la page et les ordonner dans des tableaux (mais c'est pas génial, surtout si la DB est amenée à "grandir", en plus... faut ranger les tableaux ^^)
2. Charger les données uniquement si on aperçoit un changement dans le select initial

Pour mon exemple, je vais prendre l'exemple des voitures. On image qu'il y a plusieurs marques, et que chaque marque a ses modèles :

Code:

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
<select id="marque">
	<option value=""></option>
	<option value="marque-1">Marque 1</option>
	<option value="marque-2">Marque 3</option>
	<option value="marque-4">Marque 4</option>
	<option value="marque-4">Marque 4</option>
</select>
 
<select id="modeles"></select>
 
<!-- Lib jQuery requise -->
<script>
$(function() { // nouvelle écriture de $(document).ready()
        function populateMyModeles() {
                $.ajax({
                        method: 'POST',
                        url: '/monfichier.php',
                        data: {
                                action: 'get_modeles_by_marque',
                                marque: $('#marque').val(),
                        },
                        success: function(response) {
                                if(response.success) {
                                        $('#modeles option').remove();
                                        $.each(response.modeles, function() {
                                                $('#modeles').append('<option value="'+this+'">'+this+'</option>');
                                        });
                                }
                        }
                });
        }
        
        // Executé au chargement
        populateMyModeles();
 
        // Exécuté dès que la valeur de #marque change
        $('body').on('change', '#marque', function() {
                populateMyModeles();
        });
        
});
</script>

Et côté PHP, ça donne ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
if(isset($_POST['action']) && $_POST['action'] === 'get_modeles_by_marque') {
	// Connexion à la DB
	// Récupération des données
	// Retour des données sous la forme :
	$ret = [
		'success' => TRUE,
		'modeles' => [
			'Modèle 1',
			'Modèle 2',
			'Modèle 3',
			'Modèle 4',
			'Modèle 5',
			'Modèle 6',
		],
	];
	// On retourne les headers d'une réponse JSON
	// De cette façon, pas besoin de définir "dataType" dans le call Ajax, jQuery le comprend tout seul
	header('Content-Type: application/json');
	echo json_encode($ret);
	exit;
}
 ?>

22/10/2019, 15h11
Invité
Bonjour,

Citation:

Envoyé par beaujoire

( de préférence sans changer de page )

il s'agit ici d'utiliser Ajax (dans un script "JavaScript pur" ou "jQuery").

Je t'invite à LIRE ce tuto : Web 2.0, allez plus loin avec AJAX et XMLHttpRequest
- ETUDIE l'EXEMPLE fourni (il est assez proche du tien)
Le principe :
1- dans le script JavaScript :
- récupérer (en JavaScript) la valeur du <select> sélectionné (ici, l'id groupe)
- via Ajax, l'envoyer à un script PHP (fichier externe et indépendant)
2- dans le fichier PHP :
- récupérer (en PHP) l'id transmis
- effectuer la requête SQL (comme le fichier est indépendant, il faut penser à remettre le script de connexion à la BDD)
- afficher les données (soit avec un simple echo, soit sous forme json avec json_encode)
3- dans le script JavaScript :
- récupérer les données reçues
- les afficher à l'endroit voulu

Merci jreaux62 . Je suis parti sur l'exemple Ajax que tu as indiqué en le mettant à ma sauce.
Je récupère bien mes groupes dans ma 1ere liste mais pas mes apprenants/membres dans la seconde. Surement des problème avec l'AJAX/javascript et l'échange de mon id ( code_groupe) via la méthode POST ?

Voici le index.php avec le javascript:

Code:

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
107
108
109
110
111
112
113
<html>
	<head>
		<title>EXPORT </title>
		<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;
                        }
 
/**
                        * Méthode qui sera appelée sur le click du bouton
                        */
                        function go(){
                                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){
                                                leselect = xhr.responseText;
            // On se sert de innerHTML pour rajouter les options a la liste
                                                document.getElementById('apprenant').innerHTML = leselect;
                                        }
                                }
 
 
// Ici on va voir comment faire du post
xhr.open("POST","include/traitement.php",true);
                                // ne pas oublier ça pour le post
                                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                                // ne pas oublier de poster les arguments
                                // ici, l'id du groupe
                                sel = document.getElementById('GROUPE');
                                idgroupe = sel.options[sel.selectedIndex].value;
                                xhr.send("CODE_GROUPE="+idgroupe);
                        }
                </script>
	</head>
 
 
 
    <body>
		<form>
			<fieldset style="width: 900px">
 
				<label>Groupe</label>
 
        <select name='GROUPE' id='GROUPE' onchange='go()'>
        <option value='-1'>Choisir un Groupe</option>
 
   <?php
        /* Fetch records and display in a loop */
   
        $pdo = new PDO("sqlsrv:Server=SRV-TEST\TEST_MSSQL,50000;Database=TEST", "Client", "Password");
        
        if( $pdo ) {
          echo "Connexion établie";
   
     }else{
          echo "La connexion n'a pu être établie.<br />";
          die( print_r( sqlsrv_errors(), true));
     }
 
 
 
 
    $sql1="select dbo.groupe.code_groupe AS CODE_GROUPE,dbo.groupe.nom_groupe AS GROUPE,dbo.calendrier.date_deb AS DEBUT,dbo.calendrier.date_fin AS FIN
    FROM dbo.GROUPE,dbo.FORMATION,dbo.CALENDRIER
    
    WHERE calendrier.DATE_DEB > '20180101'
    AND calendrier.code_calendrier = groupe.code_calendrier
    AND groupe.code_formation = formation.code_formation
    
    ORDER BY groupe.nom_groupe";
 
    $result1= $pdo->query($sql1);
 
//    echo $sql1;
    
    while ($row=$result1->fetch() )
 
{
 
  echo "<option value='".$row["CODE_GROUPE"]."'>".$row["GROUPE"]."</option>";
 
}
?>
 
</select>
 
<label>Apprenants</label>
				<div id='apprenant' style='display:inline'>
				<select name='apprenant'>
					<option value='-1'>Liste des Apprenants</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

et voici le code du fichier traitement.php :

Code:

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
<?php
	echo "<select name='apprenant'>";
	if(isset($_POST["idgroupe"])){
 
		$pdo = new PDO("sqlsrv:Server=SRV-TEST\TEST_MSSQL,50000;Database=TEST", "Client", "Password");
 
        $sql2="select DISTINCT dbo.APPRENANT.CODE_APPRENANT AS CODE_APPRENANT,dbo.APPRENANT.NOM_APPRENANT AS NOM_APPRENANT,dbo.apprenant.prenom_apprenant AS PRENOM_APPRENANT,CONCAT(dbo.apprenant.NOM_APPRENANT,' ',dbo.APPRENANT.prenom_apprenant) AS NOM_PRENOM_APPRENANT


        FROM dbo.apprenant,dbo.groupe,dbo.stat_apprenant
        
        WHERE groupe.nom_groupe=".$_POST["idgroup"]."
        AND dbo.groupe.code_groupe=dbo.stat_apprenant.code_groupe
        AND dbo.stat_apprenant.code_apprenant=dbo.apprenant.code_apprenant";
 
        $result2= $pdo->query($sql2);
 
        while ($row=$result2->fetch() )
 
        {
 
          echo "<option value='".$row["CODE_APPRENANT"]."'>".$row["NOM_APPRENANT"]."</option>";
 
    }
	}
	echo "</select>";
?>

23/10/2019, 22h42
Invité

Code:

xhr.send("CODE_GROUPE="+idgroupe);

Alors ce n'est pas $_POST["idgroupe"], c'est : $_POST["CODE_GROUPE"] !
24/10/2019, 23h10
beaujoire

Merci. Ca fonctionne beaucoup mieux effectivement.

J'aimerai rajouter un bouton "EXPORT CSV" afin d'exporter les données au format CSV de ma deuxieme liste. Est ce possible? Si oui comment?