Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Futur Membre du Club
    Passer la valeur d'un SELECT à un autre SELECT
    Dans le même formulaire,je voudrais passer la valeur sélectionnée dans une première select à une deuxième select sous forme d'une variable php, sans soumettre pour autant le formulaire grâce à ajax.

    La 1ère select affiche la liste des marques de voiture, ex :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <select name="BRAND" id="BRAND">
    	<option value="Audi">Audi</option>
    	<option value="BMW">BMW</option>
    	<option value="MERCEDES">MERCEDES</option>
    </select>


    Pour récupérer la valeur de la marque j'utilise le code js suivant :
    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>
    jQuery(document).ready(function($){
        $("#BRAND").change(function() {
           var selectedbrand = $("#BRAND").val();
     
    jQuery.ajax({
            type: 'GET',
            url: 'mysite.com/script/myscript.php',
            data: {selectedbrand:selectedbrand},
            success: function(data) {
            console.log(data);
            }
        });
     
        }); 
    });
    </script>


    et le script myscript.php
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    <?php
    $selectedbrand = $_GET['selectedbrand'];
    ?>


    Le code fonctionne car si dans function(data) je rajoute alert($selectedbrand) je récupère bien la valeur de la marque sélectionnée.

    En revanche, $selectedbrand n'est pas interprétée dans ma deuxième select qui après selection de la marque devrait afficher la liste des voitures lui correspondant.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    <select name="CAR" id="CAR">...</select>


    Pour cette deuxième select la liste des voitures est obtenue dynamiquement en php en :
    - utilisant $selectedbrand comme variable php pour remonter la marque sélectionnée
    - réinjectant $selectedbrand dans une requête SQL
    - parsant le résultat de la requête pour afficher les <options></options>

    Cette partie fonctionne car si je force en dur dans ce code php la valeur de $selectedbrand (ex $selectedbrand= 'BMW') j'affiche bien la liste des voitures BMW.

    Donc comment puis-je récuperer $selectedbrand dans le code php de ma deuxième select ?

    Faut-il revoir le code du js ou du script php exécuté lors d'une selection de la marque ? Ou faut-il modifier le code php de ma select "CAR" ?

    Merci de votre aide

  2. #2
    Invité
    Invité(e)
    Bonjour,

    tu as fait le plus gros du travail.

    1- Le 2ème <select>, dans ta page :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    <select name="CAR" id="CAR">
       <option value="">Sélectionnez une marque</option>
    </select>


    2- c'est dans le fichier myscript.php que tout se passe :
    • tu récupères $_GET['selectedbrand'] ((OK)
    • tu ajoutes le script de connexion à la BDD
    • tu fais la requête SQL nécessaire pour récupérer les voitures de cette marque
    • tu construis les <option> HTML

    3- Dans la fonction Ajax :
    Code jQuery :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    jQuery.ajax({
            type: 'GET',
            url: 'mysite.com/script/myscript.php',
            data: {selectedbrand:selectedbrand},
            dataType: 'html',
            success: function(data) {
    //            console.log(data);
                jQuery.('#CAR').html( data ); // affichage des options dans le select
            }
        });

  3. #3
    Futur Membre du Club
    Merci,

    En d'autres termes je :
    - modifie l'ajax pour recupérer le résultat de myscript.php sous forme html
    - déplace le code php que j'avais mis dans ma select "CAR" au niveau de myscript.php, après avoir récupéré la valeur $selectedbrand, pour générer ma liste d'options

    Malin.

    Mille mercis car je tournais autour du pot depuis un moment.

  4. #4
    Invité
    Invité(e)
    C'est le principe même d'Ajax.

  5. #5
    Futur Membre du Club
    Bonjour,

    J'ai enfin réussi à afficher dans la deuxième select la liste des voitures en utilisant le script suivant :

    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
    jQuery(function($){
    	var selectize1 = $('#Brand')[0].selectize;
    	var selectize2 = $('#Car')[0].selectize;
     
    	selectize1.on('change', function() { 
    		selectize2.clearOptions();
     
    		selectize2.load(function(callback){
    			$.ajax({
    				dataType: 'json',
    				url: 'https://mywebsite.com/myscript.php',
    				success: function(results) {
    					callback(results);
    				}
    			});
    		});
    	})
    });


    Au niveau du script php, j'arrive à me connecter à la base de donnée et à jouer une requête sql dont je reprends le résultats sous forme d'array

    Code php :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $jsonData = array();
    foreach ($results as $result)
    	{
    		$jsonData[] = array(
    			'value' => $result->Car,
    			'text'  => $result->Car
    		);
    	}
     
    echo json_encode($jsonData);
    die();


    Je sais que ma requête sql fonctionne car si je teste en dur avec where Brand = 'Audi' par exemple, je récupère bien les voitures de la marque Audi dans l'array.

    Ce que je n'arrive pas à faire, c'est récupérer en amont de la requête sql la valeur de la marque provenant de ma première select afin de l'injecter dynamiquement dans la requête.

    ex. $selectedBrand avec la requête where Brand = '$selectedBrand'.

    La requête SQL fonctionne car si j'écris en dur $selectedBrand = 'Audi' j'obtiens les bons résultats.

    Donc comment récupérer la valeur de $selectedBrand suite à l'appel AJAX au script php ?

    J'ai essayé $selectedBrand = $_GET['Brand'] mais en vain.

    Faut-il revoir le code PHP ou le code JS AJAX ?

    Merci de votre aide

  6. #6
    Rédacteur/Modérateur

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
     success: function(data) {
    //            console.log(data);
                jQuery.('#CAR').html( data ); // affichage des options dans le select
            }


    là il semble que la réponse reçue de ton ajax soit le code html des options que tu mets dans la balise select ...

    Dans ton dernier code :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    echo json_encode($jsonData);

    ta réponse est un JSON avec les text et value des options ...

    tu as deux possibilités:
    * soit tu modifies ton code coté serveur pour retourner le code html des options ...
    ainsi tu pourras faire comme dans le premier exemple , c'est adire coller directement le retour d'ajax en innerHTML de la balise select

    * soit tu modifies le callback de l'ajax pour exploiter le json reçu et ajouter avec js coté client les options dans le select en parcourant le json
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  7. #7
    Futur Membre du Club
    Bonjour Spacefrog,

    Merci de votre retour, mais j'ai résolu le problème comme expliqué dans le fil, juste avant votre réponse.

    Je passe par de l'ajax en utilisant un json pour alimenter ma select "Car". Ça fonctionne.

    Ce que je n'arrive pas à faire, et j'ignore si c'est dans l'ajax ou dans le php que ça doit se passer, c'est à :
    1. Récupérer la valeur de la select "Brand" avec la variable $selectedBrand
    2. Pour l'injecter dans ma requête sql avec un where Brand = '$selectedBrand'
    3. Afin d'afficher le résultat dans le json.

    Je bloque sur l'étape 1 alors que ça fonctionne pour l'étape 2 et 3.
    Preuve en est, si j'écris en dur et en amont de ma requête sql par exemple $selectedBrand = 'Audi' j'affiche bien dans ma select "Car" la liste des voitures de la marque Audi.

    Pour récupérer la valeur de la select "Brand", faut-il que :
    - je reste sur le même appel ajax en json et modifie mon script php ?
    - je fasse appel à 2 fonctions ajax imbriquées, se référant chacune à un script php (le 1er script avec un type data par exemple pour récupérer la valeur de select "Brand", puis un 2nd script avec un type json par exemple pour filtrer ma requête sql avec cette valeur avant d'injecter le résultat dans le json) ?

    Merci d'avance

  8. #8
    Rédacteur/Modérateur

    une seule fonction ajax suffit ...

    Considère ta fonction ajax comme un coursier qui va faire un aller retour sur le serveur pour récupérer des données

    en data tu lui donnes la liste de courses en l'occurrence tu lui donne la marque automobile
    il part sur le serveur et donne à ta requete la marque
    la requête te retourne la liste des voitures de la marque et en fait un json
    le coursier revient alors coté client dans le navigateur ( dans le success de ta fonction ajax ) avec un json des véhicules
    à toi d'exploiter le json reçu en retour pour peuple le select

    et a chaque fois que tu sélectionneras une marque différente le coursier fera le même chemin.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  9. #9
    Invité
    Invité(e)
    On reprend tout depuis le début.

    1- HTML
    1er <select> :
    Bon, généralement, quand les données viennent d'une BdD, on met en valu l'index auto-incrément, car il est UNIQUE :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <select name="BRAND" id="BRAND">
    	<option value="1">Audi</option>
    	<option value="2">BMW</option>
    	<option value="3">MERCEDES</option>
    </select>

    2ème <select> :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    <select name="CAR" id="CAR">
       <option value="">Sélectionnez une marque</option>
    </select>


    2- Ajax :
    • Perso, je passe les données en POST (plutôt qu'en GET)
    • On récupère l'option "BRAND" sélectionnée
    • On la passe au fichier PHP (get-option-car-from-brand.php)...
    • ... qui va renvoyer sous forme HTML les <option> du select 2

    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
    $(function(){ // équivalent à $(document).ready(function(){
     
    	$('#BRAND').on('change', function(){
    		var id_brand = $('#BRAND').val();
    		$.ajax({
    				type: 'POST',
    				url: '......./get-option-car-from-brand.php',
    				data: {id_brand:id_brand},
    				dataType: 'html',
    				success: function(data) {
    		//            console.log(data);
    					$.('#CAR').html( data ); // affichage des options dans le select
    				}
    		});
    	})
     
    });


    3- fichier PHP
    get-option-car-from-brand.php :
    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
    <?php
    // Récupération id_brand
    if( !isset($_POST['id_brand'] ) exit;
    $id_brand = ( !empty($_POST['id_brand'] )? $_POST['id_brand'] : 0;
    if( $id_brand == 0 ){
    ?>
       <option value="">Sélectionnez une marque</option>
    <?php
    	exit;
    }
    // connexion à la Bdd // IMPORTANT, puisque c'est un fichier PHP indépendant
    .......
    // Requête SQL : CARS de cette BRAND
    .......
    $nbre_results = .....;
    if( $nbre_results == 0 ){
    ?>
       <option value="">Sélectionnez une marque</option>
    <?php
    } else {
    	while($row=..........){
    ?>
    	<option value="<?= $row['id_car']; ?>"><?= $row['nom_car']; ?></option>
    <?php 
    	}
    }

  10. #10
    Futur Membre du Club
    Bonjour,

    Désolé, en dépit de tout vos efforts, ça ne fonctionne pas.

    Mon problème concerne a priori davantage php qu'ajax.

    Mon script js ci-dessous fonctionne bien.

    C'est l'éditeur rsjoomla.com qui me l'a communiqué parce que le select est un peu special (c'est un selectize) et doit récupérer un json en retour pour l'alimenter.

    Code JavaScript :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
    jQuery(function($){
    	var selectize1 = $('#Brand')[0].selectize;
    	var selectize2 = $('#Brand')[0].selectize;
     
    	selectize1.on('change', function() { 
    		selectize2.clearOptions();	
    		selectize2.load(function(callback){
    		var brand= document.getElementById('Brand').value;
    			$.ajax({
    				data: {brand:brand},
    				dataType: 'json',
    				url: 'https://.../myscript.php',
    				success: function(results) {
    					callback(results);
    				}
    			});
    		});
    	})
    });



    En revanche, dans mon fichier php ci-dessous, je n'arrive pas à faire passer dynamiquement la valeur brand à ma requête SQL, que ce soit avec un $_POST ou $_GET.

    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
    <?php
    define('_JEXEC', 1);
     
    // this file is in a subfolder 'scripts' under the main joomla folder
    define('JPATH_BASE', realpath(dirname(__FILE__) . '/..'));
    require_once JPATH_BASE . '/includes/defines.php';
    require_once JPATH_BASE . '/includes/framework.php';
     
    // instantiate application
    $app   = JFactory::getApplication('site');
     
    // database connection
    $db     = JFactory::getDbo();
     
    $selectedBrand = $_POST['brand'];
     
    // Run the SQL query and store it in $results
    $db->setQuery("select t2.FieldValue as Car from aso_rsform_submission_values t1 inner join aso_rsform_submission_values t2 on t1.SubmissionId = t2.SubmissionId and t1.FieldName = 'Brand'  and t2.FieldName = 'Car' inner join aso_rsform_submissions t3 on t1.SubmissionId = t3.SubmissionId where t1.FieldValue = '$selectedBrand' order by t2.FieldValue");
    $results = $db->loadObjectList();
     
    // Selectize needs an object with 'value' and 'text' properties
    $jsonData = array();
    foreach ($results as $result)
    	{
    		$jsonData[] = array(
    			'value' => $result->Car,
    			'text'  => $result->Car
    		);
    	}
     
    echo json_encode($jsonData);
    die();
    ?>


    Ligne 15 : Si je remplace $selectedBrand = $_POST['brand']; par une valeur en dur du type $selectedBrand = 'Audi'; curieusement ça fonctionne.

    Donc j'aimerai savoir quel code php rentrer pour récupérer la valeur brand transféré par l'ajax ?
    Code JavaScript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    $.ajax({
    				data: {brand:brand},
    				dataType: 'json',


    Cordialement

  11. #11
    Invité
    Invité(e)
    Bonjour,

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    	var brand= $('#Brand').val();
    	$.ajax({
    		type: 'POST',
    ...


    A toi de vérifier si l'id du <select> s'écrit "Brand", "BRAND" ou "brand" ou...

  12. #12
    Futur Membre du Club
    Je ne pense pas que ce soit un problème de nommage, mon script js fonctionne.

    Ce que je n'arrive pas c'est à récupérer la valeur pour l'utiliser dynamiquement dans ma requête SQL

    Dans mon js
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    			var brand= $('#Brand').val();
    			$.ajax({			
    				data: {brand:brand},
    				dataType: 'json',


    j'en déduis que $_POST['brand'] dans mon script php devrait me retourner la valeur brand grâce à l'ajax data: {brand:brand}.

    Dans ma console chrome j'obtiens
    XHR finished loading: GET "https://.../myscript.php?brand%5B%5D=Audi" si je sélectionne Audi dans la select "Brand"
    En revanche brand ne semble pas interprété dans le php.

    Si je remplace $selectedBrand = $_POST['brand']; par une valeur en dur du type $selectedBrand = 'Audi'; ça fonctionne, ma deuxième select "Car" est peuplée par le json filtré sur la marque Audi

    Donc je serai tenté de penser que :
    - dans l'ajax data: {brand:brand} n'est pas compatible avec dataType: 'json' mais j'ai besoin d'un json pour peupler ma select "Car"
    - mon code php $selectedBrand = $_POST['brand']; n'est pas le bon ou incomplet pour récupérer la valeur "brand" et la passer à ma requête SQL

    N'étant pas un développeur je touche aux limites de l'ajax et php.

    En complément au niveau du root du script php j'ai dans l'error_log l'erreur suivante : Array to string conversion

    Faut que je creuse mais je pressens que $selectedBrand = $_POST['brand'] génère cette erreur.

  13. #13
    Invité
    Invité(e)
    Pourtant, je n'ai écrit que 3 lignes...
    ... et tu n'en as lu que 2.

    J'ose à peine te diriger sur la DOC : jQuery.ajax() et sa syntaxe plus récente (.success / .error -> .done / .fail / .always)

  14. #14
    Futur Membre du Club
    J'ai essayé les 3 façons aucune ne marche.
    Je vais lire la doc Ajax vu que je ne suis pas développeur

  15. #15
    Invité
    Invité(e)
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    		type: 'POST',

    Sinon, par défaut, c'est GET !

    Deplus, ce n'est pas difficile à vérifier :
    dans le fichier PHP myscript.php, tu ne mets QUE :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    <?php
    var_dump(@$_POST);
    var_dump(@$_GET);

    Tu verras bien ce que tu récupères.

  16. #16
    Futur Membre du Club
    Bonjour,

    C'est bien ce que je pensai, le problème venait du php.

    La valeur que je récupérais de l'Ajax n'était pas au bon format pour ma requête dynamique SQL, comme en attestait l'erreur remontée dans les logs : Array to string conversion

    J'ai donc remplacé
    Code php :Sélectionner tout -Visualiser dans une fenêtre à part
    $selectedBrand = $_GET['brand']

    par
    Code php :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    $selection = $_GET['brand'];
    $selectedBrand = implode(" ",$selection);


    Tout fonctionne.

    Encore merci aux contributeurs qui m'ont aidé.