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.

**fredericbdr** · 17/01/2019, 13h41

Super, un grand Merci, c'était juste ça !

**fredericbdr** · 23/01/2019, 09h19

Bonjour,

J'aurai juste encore une question.

Comment récupérer maintenant la valeur de mon post issue de mon second sélect, autrement dit, récupérer mon $_POST['poste'] ?

Merci

**fredericbdr** · 24/01/2019, 11h40

J'aimerai récupérer la valeur de

Code :

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

$_POST['poste']

car ensuite je veux faire un INSERT dans une table, sauf que cette valeur je ne l'ai pas...
Dans mon fichier reservation.php j'ai bien

Code :

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

$poste = checkInput($_POST['poste']);

mais forcément elle n'est pas encore remplie avec Ajax...
Voici l'insert dans ma base avec mes autres variables dont le poste :

Code :

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

1
2
$requete = $db->prepare("INSERT INTO roombook (FName,LName,Email,Permanent,Equipe,Statut,Bureau,Poste,cin,cout) values(?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
                    $requete->execute(array($FName,$LName,$email,$perm,$equipe,$statut,$bureau,$poste,$cin,$cout));

Invité · 24/01/2019, 13h17

Bonjour,

Code :

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

1
2
3
4
            $('#poste').on('change',function(){
               var $poste = $('#poste').val();
...
            });

Attention à ne pas mélanger et confondre JS et PHP...

var $poste : ici, on est en JS. Le $ n'est pas obligatoire (et peut prêter à confusion)

**fredericbdr** · 24/01/2019, 13h30

Salut,

Oui merci, mais où est-ce que tu vois un $poste dans mon Js ?
Et comment récupérer cette valeur et l'insérer dans une base ensuite ?

Invité · 24/01/2019, 14h59

Oups, exact (j'ai confondu avec une autre discussion )

Pour "récupérer" et "enregistrer", en JS si j'ai bien compris, c'est le même principe : via Ajax.
Sinon, "classiquement" avec un bouton "submit" : récupération et traitement en PHP.

Je ne vois pas où est ton problème.

**fredericbdr** · 24/01/2019, 15h10

Ok, pas de soucis

Mon problème est que je souhaite récupérer ce $_POST['poste'] et l'insérer dans une table, hors je n'arrive pas à récuperer cette variable.
Voici mon script au debut de ma page 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
<script>
        $(function(){
            $('#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>

Mon traitement au tout début de cette meme page :

Code :

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

1
2
3
4
if(!empty($_POST)) {
       .......
        $bureau     = checkInput($_POST['bureau']);
        $poste      = checkInput($_POST['poste']);

Et le traitement de l'insertion :

Code :

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

1
2
3
$db = Database::connect();
                    $requete = $db->prepare("INSERT INTO roombook (FName,LName,Email,Permanent,Equipe,Statut,Bureau,Poste,cin,cout) values(?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
                    $requete->execute(array($FName,$LName,$email,$perm,$equipe,$statut,$bureau,$poste,$cin,$cout));

Et enfin mon fichier de traitement de l'ajax, 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
22
?php
include 'config.php';
session_start();
 
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>';
                            }
}
?>

Et j'oubliais, mon form :

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
<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é · 24/01/2019, 15h22

tes bouts de code n'apportent rien.

As-tu une balise <form> dans ta page ?
As-tu un <input type="submit"> ?

Tu veux faire un traitement "classique" ("submit du form" -> PHP) ou "sans rechargement de page" (JS + Ajax -> PHP) ??
Soit plus CLAIR.

(EDIT] Dans ton 1er message :

Code :

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

<form class="form" role="form" action="reservation.php" method="post" enctype="multipart/form-data">

Donc, tu peux effectuer un traitement "classique".
Par contre, il manque un <input type="submit"> sur lequel cliquer...

Je répète : je ne comprends pas ce qui te pose problème.

**fredericbdr** · 24/01/2019, 15h26

Ok désolé pour les codes, oui j'ai une balise form avec un bouton submit, je n'ai pas tout mis (

Code :

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

<form class="form" role="form" action="reservation.php" method="post" enctype="multipart/form-data">

) et

Code :

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

<button type="submit" name="submit" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span>Ajouter</button>

J'ai en gros 2 balises sélect, une id=bureau, où j'affiche la liste des bureaux à l'aide d'une simple requete, puis une liste id=poste qui affiche en temps réel avec ajax (voir mon code ajaxData.php et mon script ci-dessus), la liste des postes dispos pour un bureau choisi.

Je voudrai donc récupérer la valeur du poste choisi et l'insérer dans ma table room (voir requete INSERT ci-dessus), mais je n'arrive pas à récupérer cette valeur.

Invité · 24/01/2019, 15h28

Code :

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

<form ... action="reservation.php" method="post" ...>

Au clic sur le bouton, le traitement se fera dans reservation.php, en PHP.
La récupération se fera avec $_POST.

Comme tu l'as écrit ici :

Code php :

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

1
2
3
4
if(!empty($_POST)) {
       .......
        $bureau     = checkInput($_POST['bureau']);
        $poste      = checkInput($_POST['poste']);

Je ne vois toujours pas où est le problème, puisque tu sembles connaitre le PHP...

**fredericbdr** · 24/01/2019, 15h33

Oui normalement ça je sais bien le faire sauf que là avec ajax au milieu, je ne sais pas où est celle valeur de la variable $_POST['poste'])
Je l'ai pourtant initialisé dans reservation.php qui sert à faire aussi le traitement avec

Code :

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

$poste = $_POST['poste'];

Mais cette variable est vide même si aucune erreur à priori ne se passe, c'est pas un soucis avec ajax ? Car on traite justement cette balise select qui affiche le poste avec ajax dans ajaxData.php...

**Toufik83** · 24/01/2019, 16h19

Salut,

Code :

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

data:'bureau='+bureau

, dans Ajax tu envoies seulement la variable 'bureau' vers le fichier php.
as-tu essayé

Code :

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

data:{bureau:bureau,poste:poste}

?

**fredericbdr** · 24/01/2019, 16h29

Oui, pas bête du tout mais ton code ne marche pas, je n'ai plus le choix du poste dans mon second select...

**Toufik83** · 24/01/2019, 16h57

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
if($rowCount > 0){
    echo '<option value="">Sélectionnez un Poste</option>';
    while($row = $requete->fetch_assoc()) {
    //cette accolade est en trop ====> {
         echo '<option value="'.$row['id'].'">'.$row['Poste'].'</option>';
    //celle-là aussi ====>}
    }
}
else{ 
    echo '<option value="">Poste non disponible</option>';
}

ajoute le callback error dans Ajax pour voir s'il y a des erreurs dans le fichier 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
 
$('#bureau').on('change',function(){
        var bureau = $(this).val();
        if(bureau){
            $.ajax({
                ...
                success:function(html){
                    $('#poste').html(html); 
                },
                error:function(err){
                    alert("Erreur ajax :"+err);
                }
            }); 
        }else{
            $('#poste').html('<option value="">Select bureau first</option>');
        }
    });

Lier 2 listes avec un Select [AJAX]

jQuery

Discussions similaires

Partager

Partager