Menu déroulant Select interactif

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
michgoarin
Messages : 5
Enregistré le : 10 févr. 2021, 14:29

Menu déroulant Select interactif

Message par michgoarin » 10 févr. 2021, 14:39

Bonjour,
Je ne suis pas un professionnel de JavaScript ou Ajax. Je cantonne à l'utilisation de PHP. Pour cette raison, j'ai besoin de créer un menu déroulant qui s'adapte à un premier menu déroulant.
Première Page de test :

Code : Tout sélectionner

<?php
session_start();

if (!empty($_POST)) {
    var_dump($_POST);
}
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <h1>Fournisseur - Bon de Commande</h1>
        <form action='test_select_auto.php' method='post' name='formDevis' id='loginform' enctype='multipart/form-data'>
            <h2>Choix du fournisseur : </h2>
            
            <select name='organisme_exterieur' id="organisme_exterieur" class='popup' onchange="fetch_select(this.value);">
				<?php
					$requeteFournisseur = $bdd->query("SELECT DISTINCT FOURNISSEUR FROM `bon_de_commande` ORDER BY `FOURNISSEUR`");
					while ($fournisseur = $requeteFournisseur->fetch()){
					    echo ("<option value='".$fournisseur['FOURNISSEUR']."'>".$fournisseur['FOURNISSEUR']."</option>");
					}
					$requeteFournisseur->closeCursor();
				?>
			</select><br />

            <h2>Choix du bon de commande</h2>
            <select name="bon_de_commande" id="bon_de_commande"></select>

            <br><br>
            <button type="submit">ENVOYER !</button>
        </form>

        
       <script type="text/javascript">
            function fetch_select(val) {
                $.ajax({
                    type: 'POST',
                    url: 'data.php',
                    data: {
                        organisme_exterieur: val
                    },
                    success: function(response) {
                        $('#bon_de_commande').html(response);
                    }
                })
            }
        </script>
    </body>
Et la deuxième page de data.php :

Code : Tout sélectionner

<?php
if (!empty($_POST['organisme_exterieur'])) {
    
    $rechercheBdc = $bdd->query("SELECT*FROM `bon_de_commande` WHERE `FOURNISSEUR`='".$_POST['organisme_exterieur']."' ORDER BY `ID`");

    
    $res = [];
    
    while ($resultatsBdc = $rechercheBdc->fetch()){
       $res[] = '<option value="'.$resultatsBdc['ID'].'">'.$resultatsBdc['NUM_COMMANDE'].'</option>';
    }
    
    $rechercheBdc->closeCursor();
    
    echo implode(PHP_EOL, $res);
    
    exit;
}
?>
Auriez vous une solution ?

Dans l'attente d'une réponse de votre part, par avance merci.

michgoarin
Messages : 5
Enregistré le : 10 févr. 2021, 14:29

Re: Menu déroulant Select interactif

Message par michgoarin » 10 févr. 2021, 18:17

Une solution qui vaut ce qu'elle vaut :
Page de choix :

Code : Tout sélectionner

<?php
if (!empty($_POST)) {
    var_dump($_POST);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>Association Devis et BDC :</h1>
        <form action='test_select_auto.php' method='post' name='formDevis' id='loginform' enctype='multipart/form-data'>
            <h2>Choix du Fournissseur :</h2>
           <select name='organisme_exterieur' id="organisme_exterieur" class='popup' onchange="fetch_select(this.value);">
                <?php
                    $requeteFournisseur = $bdd->query("SELECT bon_de_commande.FOURNISSEUR as nomFournisseur,  organisme_exterieur.ID_ORGA_EXT AS idFournisseur 
						FROM `bon_de_commande` 
						INNER JOIN `organisme_exterieur` 
						ON bon_de_commande.FOURNISSEUR = organisme_exterieur.ORGANISME_EXT
						GROUP BY bon_de_commande.FOURNISSEUR");
					while ($fournisseur = $requeteFournisseur->fetch()){
					    echo ("<option value='".$fournisseur['idFournisseur']."'>".$fournisseur['nomFournisseur']."</option>");
					}
					$requeteFournisseur->closeCursor();
					
					/*
					foreach ($sports as $sport): ?>
                    <option value="<?= $sport['sport_id']; ?>"><?= $sport['sport_nom']; ?></option>
                    <?php endforeach;*/
				?>
            </select>

            <h3>Choix du bon de commande :</h3>
            <select name="post_bdc" id="bon_de_commande"></select>
            <br><br>
            
            <button type="submit">ENVOYER !</button>
        </form>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            function fetch_select(val) {
                $.ajax({
                    type: 'POST',
                    url: 'data.php',
                    data: {
                        get_option: val
                    },
                    success: function(response) {
                        $('#bon_de_commande').html(response);
                    }
                })
            }
        </script>
    </body>
</html>
Page de data :

Code : Tout sélectionner

<?php
    
    $requeteTabBonDeCommande = $bdd->query("SELECT bon_de_commande.ID as idBDC, bon_de_commande.NUM_COMMANDE as numCommande, organisme_exterieur.ID_ORGA_EXT AS idFournisseur, organisme_exterieur.ORGANISME_EXT AS nomFournisseur
    	FROM `bon_de_commande` 
    	INNER JOIN `organisme_exterieur` 
    	ON bon_de_commande.FOURNISSEUR = organisme_exterieur.ORGANISME_EXT
    	WHERE organisme_exterieur.ID_ORGA_EXT='".$_POST['get_option']."'
    	ORDER BY bon_de_commande.FOURNISSEUR");
    
    if (!empty($_POST['get_option'])) {
        $res = [];
        
        while ($listBonDeCommandeExtrait = $requeteTabBonDeCommande->fetch()){
            
           $res[] = '<option value="' . $listBonDeCommandeExtrait['idBDC'] . '">' . $listBonDeCommandeExtrait['numCommande'] . '</option>';
        }
        
        $requeteTabBonDeCommande->closeCursor();
    
        echo implode(PHP_EOL, $res);
        exit;
    }
    else{
        
        echo "Erreur !!!";
    }
   ?>

WilliamThompson
Messages : 3
Enregistré le : Aujourd’hui, 03:44
Contact :

Re: Menu déroulant Select interactif

Message par WilliamThompson » Aujourd’hui, 03:50

Solution pour créer un slitherio menu déroulant dynamique en PHP et Ajax
Explication du code:

Page de sélection (test_select_auto.php):

Formulaire HTML:
Un formulaire avec deux menus déroulants:
Choix du fournisseur: Remplissage initialisé avec les fournisseurs uniques de la table bon_de_commande.
Choix du bon de commande: Initialement vide et se remplira dynamiquement en fonction du fournisseur sélectionné.
Un bouton "ENVOYER !" pour soumettre le formulaire.
JavaScript:
Fonction fetch_select(val) déclenchée lors du changement de sélection du fournisseur.
Envoie une requête AJAX vers data.php avec la valeur du fournisseur sélectionné (val).
Traite la réponse JSON contenant les options du bon de commande pour le fournisseur sélectionné.
Remplace le contenu du menu déroulant "Choix du bon de commande" avec les nouvelles options.
Page de traitement des données (data.php):

Récupération de la valeur du fournisseur:
Vérifie si l'attribut $_POST['get_option'] existe (envoyé par la requête AJAX).
Requête SQL:
Exécute une requête SQL pour obtenir les bons de commande du fournisseur sélectionné.
Joint les tables bon_de_commande et organisme_exterieur pour récupérer les noms des fournisseurs.
Traitement des résultats:
Crée un tableau $res pour stocker les options HTML.
Parcourt chaque résultat de la requête:
Crée une option HTML avec la valeur idBDC et le texte numCommande.
Ajoute l'option au tableau $res.
Concatène les options HTML en une chaîne unique.
Renvoie la chaîne JSON contenant les options HTML.
Améliorations possibles:

Gestion des erreurs:
Implémenter un meilleur contrôle des erreurs pour les requêtes SQL et les données manquantes.
Optimisation des performances:
Considérer l'utilisation de requêtes SQL plus efficaces si vous manipulez un grand nombre de données.
Sécurité:
Échapper les données des utilisateurs pour éviter les injections SQL et autres vulnérabilités.
Accessibilité:
Assurez-vous que les menus déroulants sont accessibles aux utilisateurs avec des handicaps.
Remarques:

Ce code suppose que vous avez une base de données MySQL nommée bdd et des tables bon_de_commande et organisme_exterieur avec la structure décrite dans le code.
Assurez-vous que la bibliothèque jQuery est correctement incluse dans votre page HTML.
Vous pouvez personnaliser le code en fonction de vos besoins spécifiques et de la structure de votre base de données.
J'espère que cette explication vous a aidé à comprendre le fonctionnement du code et à l'adapter à vos besoins.

Répondre