Passer la valeur d'un SELECT à un autre SELECT

**jjoire** · 17/01/2020, 09h22

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

Invité · 17/01/2020, 10h08

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
        }
    });

**jjoire** · 17/01/2020, 11h25

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.

Invité · 17/01/2020, 13h46

C'est le principe même d'Ajax.

**jjoire** · 02/03/2020, 09h00

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

**SpaceFrog** · 03/03/2020, 14h15

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

**jjoire** · 04/03/2020, 08h14

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

**SpaceFrog** · 04/03/2020, 08h23

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.

Invité · 04/03/2020, 09h20

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 
	}
}

**jjoire** · 07/03/2020, 11h42

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

Invité · 07/03/2020, 12h24

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...

**jjoire** · 07/03/2020, 18h03

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.

Invité · 07/03/2020, 19h13

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)

**jjoire** · 07/03/2020, 19h20

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

Invité · 07/03/2020, 19h25

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.

**jjoire** · 10/03/2020, 08h45

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é.

Passer la valeur d'un SELECT à un autre SELECT [AJAX]

jQuery

Discussions similaires

Partager

Partager