Bonjour ,

Je recontre un soucis concernant avec AJAX et les interactions avec Php/MySQL

J'ai la volonté de créer un formulaire comprennant menu et sous menu de selection .
L'arborescence doit avoir trois niveaux ( Ex : Choix d'une Region -> Choix d'un département -> Choix d'une ville ) .

Voici mon 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
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
<?php 
 
include 'bsd.php';
include 'Accueil.php';
?>
<!DOCTYPE html>
    <html>
    <head>
    	<title>Ajout d'une activité</title>
    </head>
    <body>
 
 
    		<div class="container">
    		<h1>Ajout d'une activité </h1>
    	    <form action="Activite1.php" method="post">
            <label for="activiteNom">Nom de l'Activite</label>
            <br />
            <input type="text" id="activiteNom" name="activiteNom" style="width: 800px;" /><br />
 
            <label for="domaine1">1ere Attente fondamentale </label>
            <br />
 
 
 
           	<select class="slt1 custom-select custom-select-md lg-3" name="domaine1" id="domaine1">
            	<option value="0">Selectionner le domaine disciplinaire</option>
            <?php
 
					$reponse = $bdd->query('SELECT * FROM matieres ORDER BY Domaines');
 					while ($donnees = $reponse->fetch()){?>
 
				<option value="<?php echo $donnees['matieresNom']?>"> <?php echo $donnees['matieresNom'] ;?></option>
					<?php };?>
 
			</select>
<!--Script de lancement de l'AJAX -->
  <script type="text/javascript">
$(document).ready(function(){
  /*Les sous menu sont cachés au lancement de la page*/
	$(".subMenu").hide(); 
    $('#domaine1').on('change',function(){
    	var domaine1 = $(this).val();
      /*Affichage du sous menu correspondant */
    	$('.subMenu1').show();
 
        if(domaine1){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'matieresNom='+domaine1,
                success:function(html){
                    $('#testAjax').html(html);
                }
            }); 
        }else{
            $('#testAjax').html('<option value="">Selectionner le domaine</option>');
        }
    });
});
</script>
<!--Le sous menu qui doit être alimenté par la req Ajax -->
<div class="subMenu subMenu1">
		<label for="attente1"></label>
<select class="submenu attente1 custom-select custom-select-sm" id="testAjax">
  <option value="0">Selectionner l'attente fondamentale</option>
 </select>
</div>

Ce que j'ai mis en place déjà c'est la partie " visible " :

Selection du premier champ
Affichage du sous menu mais celui ressort vide
La valeur de selection du premier champ ressort bien mais je n'arrive pas à la traiter avec AJAX et la renvoyer dans le deuxieme champ select ( Le subMenu )

Voici la partie Ajax :

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
<?php
//Base de données
include('bsd.php');
//On vérifie les valeurs POST
if(isset($_POST["matieresNom"]) && !empty($_POST["matieresNom"])){
    //Je lance la req pour récupérer dans ma table attentes_fondamentales , toutes les attentes qui correspondent au select du premier menu
    $donnees = $db->query("SELECT attentesNom FROM attentes_fondamentales WHERE matieresID = ".$_POST['matieresNom']."");
    while($row = $donnees->fetch()){ ?>
            echo '<option value=' . $row['attentesNom].>'.$row['attentesNom'].'</option>';
        }
    }else{
        echo '<option value="">. 'Attentes non définies' .</option>';
    }
 ?>

Etant encore novice , j'ai besoin de votre aide afin de répondre à ce problème . Je trouve tout et son contraire sur le Net , je ne sais plus ou chercher ...
Est ce un problème de syntaxe , de logique , suis-je complètement à coté de ce que je dois faire ?

Merci d'avance pour le temps que vous me consacrerez .