Forum : Remplir Select avec base de donnée

Bonjour,
Je souhaite remplir un Select avec des données de ma base MySQL.
Cela fonctionne parfaitement pour mes autres Select sauf un. Il se vide dès que je selectionne une valeur.

Dans mon fichier PHP:
                          <select class="form-select" aria-label="Default select example" name="booking_offer" id="booking_offer" onchange="DiscountOffer(this.value)">
                            <option value="">Sélectionner l'offre</option>                           
                              <?php

                                $stmt = $db->prepare("SELECT * FROM tab_offer ORDER BY offer ASC");
                                $stmt->execute();
                                    while ($row = $stmt->fetch()) {
                                    //$row['offer'];
                                    echo '<option value="'.$row['id_offer'].'">'.$row['offer'].'</option>';
                                    }
                              ?>
                          </select>

Dans mon fichier script.js pour la fonction onchange. C'est pour afficher une valeur dans un input après avoir selectionner une valeur de mon Select.
function DiscountOffer(id){
    $('#booking_offer').html('');
    $.ajax({
       type: 'post',
       url: 'ajaxdata.php',
       data: {offer_id : id},
       success: function(data){
           document.getElementById('booking_discount').value= data;
       }
   })
};

Dans mon fichier ajaxdata.php
if(isset($_POST['offer_id']) && $_POST['offer_id'] != ""){
    $idoffer = $_POST['offer_id'];
    $check = $db->prepare("SELECT discount FROM tab_offer WHERE id_offer = ?");
    $check->execute(array($idoffer));
    $data = $check->fetch();
    $result = $data['discount'];
    echo $result;        
}

Ce que je veux

Comprendre pourquoi mon Select se vide après avoir selectionné une valeur.

Ce que j'obtiens

la première fois le Select se remplit bien mais il se vide dès que l'on selectionne une valeur. Je ne sais pas pourquoi car j'utilise le même code que pour mes autres Select qui fonctionnent bien.

Orivoir21

Bonjour je pense que le select se vide à cause de cette ligne là:

$('#booking_offer').html('');

qui clairement sélectionne le select et remplace le contenu HTML par une chaine de texte vide,
ce code ce déclenchant à chaque changement de valeur dans le select,
au moment où tu change de valeur le select et vidé.

C'est parce-que tu déclenche la fonction DiscountOffer après chaque changement de valeur.

<select class="form-select" aria-label="Default select example" name="booking_offer" id="booking_offer" onchange="DiscountOffer(this.value)">

A noter que lorsque le select et vidé la requête AJAX et envoyée.

function DiscountOffer(id){
    $('#booking_offer').html('');
    $.ajax({
       type: 'post',
       url: 'ajaxdata.php',
       data: {offer_id : id},
       success: function(data){
           document.getElementById('booking_discount').value= data;
       }
   })
}

Est-ce que juste envoyer la requête AJAX sans vidé le select ne pourrait pas suffire ?

function DiscountOffer(id){
    // $('#booking_offer').html('');
    $.ajax({
       type: 'post',
       url: 'ajaxdata.php',
       data: {offer_id : id},
       success: function(data){
           document.getElementById('booking_discount').value= data;
       }
   })
}

Il paraît plus normal que la requête AJAX (la validation du select) soit faite lorsque l'utilisateur valide complétement un formulaire du genre:

<form action="#" method="POST" id="form_booking_offer">

    <select class="form-select" aria-label="Default select example" name="booking_offer" id="booking_offer">
        <option value="">Sélectionner l'offre</option>                           
        <?php

            $stmt = $db->prepare("SELECT * FROM tab_offer ORDER BY offer ASC");
            $stmt->execute();

            while ($row = $stmt->fetch()) {
                //$row['offer'];
                echo '<option value="'.$row['id_offer'].'">'.$row['offer'].'</option>';
                }
            ?>
    </select>

    <button type="submit">Envoyer</button>

</form>

<script>

// sélectionne et écoute l'envoi du formulaire
$("#form_booking_offer").submit(function(event) {

    // annule le comportement par défaut
    // (l'envoi des données à la source + rechargement de la page)
    event.preventDefault();

    // lit la valeur dans le select
    const id = $("#booking_offer").value;

    console.log(`Formulaire booking offer envoyer avec la valeur: ${id}`);

     // envoi la requête AJAX
      $.ajax({
       type: 'post',
       url: 'ajaxdata.php',
       data: {offer_id : id},
       success: function(data){
           document.getElementById('booking_discount').value = data;
       }
   })

});

</script>

gillesr

Bonjour,

C'est cette ligne qui vide ton select dès que la fonction DiscountOffer est appelée :

$('#booking_offer').html('');

Garry_Chapo

Auteur

Merci à vous deux Orivoir21 et gillesr
Effectivement en supprimant cette ligne cela fonctionne bien. il m'a fallut vider mes caches car lorsque je l'avais testé cela n'était pas pris en changement.

Merci encore

ramisthand76

i got same problem, after see your commets i solve this, thank you for sharing your comments https://myfiosgateway.one/
https://tutuappvip.co/mobdro-download

Remplir Select avec base de donnée

2 réponses