Dependents Select Box ( 03 selects) using PHP, JQuery and Ajax
Posté : 21 janv. 2020, 17:35
Salut tout le monde;
Est il possible de m’accompagner dans mon GROS problème qui est le suivant :
j’essaie de développer une recherche de type Dynamic Dependent Select Box ( 03 form conditionnels) en faisant appel à php, SQL mais aussi à javascript et jquery (précisément Ajax) .
- pour mieux comprendre le code (script) ci-dessous utilisé voilà la dénomination des tables et clés utilisés :
t1 : 1_art avec : id_art, intitule / <select name ="art" id = "art">
t2 : 2_autr avec : id_aut, nom, autg (clé étrangère) / <select name ="nom" id = "nom">
t3 : 3_oeuv avec : id_oeuv, titre, oeuvg (clé étrangère) / <select name ="liv" id = "liv">
liens entre tables :
1_art → 2_autr → 3_oeuv
code jquery : jquery-3.4.1.min.js ( enregistré à la page racine)
fichier php en lien : heada.php
tous les fichiers sont ds le même dossier
Résultats obtenus :
1 select : fonctionne correctement avec php inclus à la page, sans faire appel à Ajax ou Javascript .
select 2 et 3 ne fonctionne pas car aucune interaction avec le 1 select
Merci de m’indiquer mon ou mes erreurs
Merci infiniment
fichier php :
Est il possible de m’accompagner dans mon GROS problème qui est le suivant :
j’essaie de développer une recherche de type Dynamic Dependent Select Box ( 03 form conditionnels) en faisant appel à php, SQL mais aussi à javascript et jquery (précisément Ajax) .
- pour mieux comprendre le code (script) ci-dessous utilisé voilà la dénomination des tables et clés utilisés :
t1 : 1_art avec : id_art, intitule / <select name ="art" id = "art">
t2 : 2_autr avec : id_aut, nom, autg (clé étrangère) / <select name ="nom" id = "nom">
t3 : 3_oeuv avec : id_oeuv, titre, oeuvg (clé étrangère) / <select name ="liv" id = "liv">
liens entre tables :
1_art → 2_autr → 3_oeuv
code jquery : jquery-3.4.1.min.js ( enregistré à la page racine)
fichier php en lien : heada.php
tous les fichiers sont ds le même dossier
Résultats obtenus :
1 select : fonctionne correctement avec php inclus à la page, sans faire appel à Ajax ou Javascript .
select 2 et 3 ne fonctionne pas car aucune interaction avec le 1 select
Merci de m’indiquer mon ou mes erreurs
Merci infiniment
Code : Tout sélectionner
<?php
include 'hearder2.php';
?>
<section class= "print">
<div class = "sec">
<?php
$query =("SELECT * FROM 1_art GROUP BY 1_art.intitule");
$result =mysqli_query ($conn, $query );
?>
<select name ="art" id = "art">
<option value = "">Select intitule</option>
<?php
while ( $row = mysqli_fetch_array( $result)){
?>
<option><?php echo $row['intitule']; ?></option>
<?php
}
?>
</select>
<br><br>
<select name ="nom" id = "nom">
<option value = "">Select nom</option>
</select>
<br><br>
<select name ="liv" id = "liv">
<option value = "">Select liv</option>
</select>
</div>
<script type = "text/javascript">
$(document).ready(function(){
$('#art').on('change',function(){
var artID = $(this).val();
if (artID){
$.ajax({
type : 'POST',
url:'heada.php',
data:'id_art='+artID,
success:function(html){
$('#nom').html(html);
$('#liv').html('<option value = "">Select nom</option>');
}
});
}else{
$('#nom').html('<option value = "">Select intitule</option>');
$('#liv').html('<option value = "">Select nom</option>');
}
});
$('#nom').on('change',function(){
var nomID = $(this).val();
if (nomID){
$.ajax({
type : 'POST',
url:'heada.php',
data:'id_aut='+nomID,
success:function(html){
$('#liv').html(html);
}
});
}else{
$('#liv').html('<option value = "">Select nom</option>');
}
});
});
</script>Code : Tout sélectionner
<?php
include 'hearder2.php';
?>
<?php
if(isset($_POST['id_art'])&& ! empty ($_POST['id_art'])){
$query =("SELECT * FROM 2_autr WHERE 2_autr.autg = ".$_POST['id_art']." GROUP BY 2_autr.nom");
$result =mysqli_query ($conn, $query );
echo '<option value = "">Select nom</option>';
while ( $row = mysqli_fetch_array( $result)){
echo '<option value = "'.$row['id_aut'].'">'.$row['nom'].'</option>';
}
}
if(isset($_POST['id_aut'])&& ! empty ($_POST['id_aut'])){
$query =("SELECT * FROM 3_oeuv WHERE oeuvg = ".$_POST['id_aut']." GROUP BY 3_oeuv.titre");
$result =mysqli_query ($conn, $query );
echo '<option value = "">Select liv</option>';
while ( $row = mysqli_fetch_array( $result)){
echo '<option value = "'.$row['id_oeuv'].'">'.$row['titre'].'</option>';
}
}
?>