Lier 2 listes avec un Select

**fredericbdr** · 16/01/2019, 11h42

Bonjour,
N'ayant pas trouvé de solutions dans les nombreux Posts sur ce forum, je viens vous demander conseils.
J'ai une base de données avec 1 table (room) qui contient les champs suivants (id | Bureau | Poste | disponible | cusid )

Voici mon fichier reservation.php dans lequel j'ai mon form et où j'appelle Ajax:

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
<!-- jQuery Js -->
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script src="assets/js/jquery.min.js"></script>
 <script type="text/javascript">
            $('#bureau').on('change',function(){
        var bureau = $(this).val();
        if(bureau){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'Bureau='+bureau,
                success:function(html){
                    $('#poste').html(html); 
                }
            }); 
        }else{
            $('#poste').html('<option value="">Select bureau first</option>');
        }
    });
    </script>
 
<form class="form" role="form" action="reservation.php" method="post" enctype="multipart/form-data">
<div class="form-group">
                                            <label for="bureau">Bureau *</label>
 
                                            <?php $db = Database::connect();
                                                  $requete = $db->query('SELECT Distinct Bureau FROM room WHERE disponible = \'Libre\' ORDER BY Bureau ASC');
                                                  $rowCount = $requete->rowCount();
                                            ?>
 
                                               <select id="bureau" name="bureau" class="form-control" required>
                                                   <option value="">Sélectionnez un bureau</option>
                                                <?php
                                                   if($rowCount > 0){
                                                        while($item = $requete->fetch()) {
                                                            echo '<option value="'.$item['Bureau'].'">'.$item['Bureau'].'</option>';
                                                                }
                                                   } else{
                                                        echo '<option value="">Bureau non disponible</option>';
                                                        }
                                                   Database::disconnect();
                                            ?>
                                                </select>
 
                              </div>
 
                              <div class="form-group">
                                  <label for="poste">Poste </label>
                                      <select name="poste" id="poste" class="form-control" required >
                                          <option value="">Sélectionnez d'abord un bureau</option>
                                      </select>
                              </div>
</form>

Et voici mon fichier ajaxData.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
<?php
include 'config.php';
 
if(isset($_POST["bureau"]) && !empty($_POST["bureau"]))
{
    $requete = $con->query("SELECT DISTINCT Poste FROM room WHERE Bureau = ".$_POST['bureau']." AND disponible = 'Libre' ORDER BY Poste ASC");
 
        //Count total number of rows
        $rowCount = $requete->num_rows;
            if($rowCount > 0){
                echo '<option value="">Sélectionnez un Poste</option>';
                    while($row = $requete->fetch_assoc()) {
                        {
                        echo'<option value="'.$row['id'].'">'.$row['Poste'].'</option>';
                        }
                }
                        }else{
                                echo '<option value="">Poste non disponible</option>';
                            }
}
?>

Je n'arrive pas à trouver mon erreur, trop la tête dedans...

Merci !!

**Sodium** · 16/01/2019, 13h04

Bonjour,

Il faut que tu décrives plus précisément le problème que tu rencontres.
Est-ce que tu as une erreur ? Est-ce qu'il ne se passe rien ? Est-ce que tu as une erreur dans la console JS ? Est-ce que l'appel AJAX se fait bien et dans ce cas quel est le code de réponse (200, 500...) ?

**fredericbdr** · 16/01/2019, 13h36

Salut,

Non je n'ai pas d'erreur dans la console et il ne se passe rien, je crois que je ne vais donc même pas dans le fichier ajaxData.php.
Je peux bien sélectionner dans la première liste déroulante mon numéro de bureau, mais il ne se passe rien alors dans la seconde...

Invité · 16/01/2019, 23h08

Bonjour,

Code :

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

    data:'Bureau='+bureau,

Code :

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

if(isset($_POST["bureau"]) && !empty($_POST["bureau"]))

Problème de majuscule.

**fredericbdr** · 17/01/2019, 08h39

Bonjour jreaux62,

Merci j 'ai enlevé la majuscule mais ça ne change rien quand même...
Mon script à l'air pourtant bon :

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
<script type="text/javascript">
            $('#bureau').on('change',function(){
        var bureau = $(this).val();
        if(bureau){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'bureau='+bureau,
                success:function(html){
                    $('#poste').html(html); 
                }
            }); 
        }else{
            $('#poste').html('<option value="">Select country first</option>');
        }
    });
    </script>

Et mon formulaire avec mes 2 balises Select :

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
<div class="form-group">
                                            <label for="bureau">Bureau *</label>
 
                                            <?php $db = Database::connect();
                                                  $requete = $db->query('SELECT Distinct Bureau FROM room WHERE disponible = \'Libre\' ORDER BY Bureau ASC');
                                                  $rowCount = $requete->rowCount();
                                            ?>
 
                                               <select id="bureau" name="bureau" class="form-control" required>
                                                   <option value="">Sélectionnez un bureau</option>
                                                <?php
                                                   if($rowCount > 0){
                                                        while($item = $requete->fetch()) {
                                                            echo '<option value="'.$item['Bureau'].'">'.$item['Bureau'].'</option>';
                                                                }
                                                   } else{
                                                        echo '<option value="">Bureau non disponible</option>';
                                                        }
                                                   Database::disconnect();
                                            ?>
                                                </select>
 
                              </div>
 
                              <div class="form-group">
                                  <label for="poste">Poste </label>
                                      <select name="poste" id="poste" class="form-control" required >
                                          <option value="">Sélectionnez d'abord un bureau</option>
                                      </select>
                              </div>

Invité · 17/01/2019, 11h46

Bonjour,

et oui...
Remplace :

Code :

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

1
2
3
4
5
<script type="text/javascript">
            $('#bureau').on('change',function(){
...
            });
</script>

Par :

Code :

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

1
2
3
4
5
6
7
<script>
$(function(){
            $('#bureau').on('change',function(){
...
            });
});
</script>

N.B. $(function(){ est un raccourci pour $(document).ready(function() {.

Ton script JS étant avant le code HTML, il ne connait pas encore les éléments du DOM.
Il faut donc attendre que la page soit prête avant de l'exécuter.

IMPORTANT : pense à mettre des alert() et/ou console.log() dans le script, pour afficher les variables et savoir par où passe le script.

Lier 2 listes avec un Select [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager