Lier deux SELECT

Version imprimable

Lier deux SELECT

Bonjour,
Je voudrais par le biais d'un formulaire qu'un utilisateur efface des recettes des collections qu'il a crée. En faisant simplement tout marche mais je voudrais avoir deux select quand l'utilisateur dans le premier select va choisir une collection dans le deuxième select je voudrais avoir la liste des recettes liées à cette collection.
J'ai essayé d'utiliser des portions de scripts que j'ai déjà utilisé dans certaines circonstances mais je m'en doutais cela ne marche pas. Quand je sélectionne une collection on dirais que la page s'actualise.
Mon formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--formulaire supprimer la recette d'une collection-->
                        <form action="vueCollections.php" method="post" class="formDelRec">
                            <div class="form-group mb-3">
                                <select select class ="mescollections form-select" name="id_collRec"  onChange="chargerRecByCollection()">
                                    <option value="" selected>vos collections</option>
                                    <?php foreach($collections as $collection) : ?>
                                    <option value="<?=$collection['id_coll']?>"><?=$collection['titre_coll']?></option>
                                    <?php endforeach?>      
                                </select>
                                <select select class ="recettesByCollect form-select" name="id_rec">
                                </select>
                            </div>
                            <input type="submit" name="submitDelRecByCollect" class=" mb-3" value="submit">
                       </form>

Mon code js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function chargerRecByCollection() {
        collection_text= document.querySelector('.mescollections').value;
        console.log(collection_text);
        if(collection_text!="") {
            //j'ajoute l'id de la collection à mon URL
            window.location.href = "vueCollections.php?id_coll=" + collection_text;
            //recuperation des recettes pour le select page collections
        let file = "../ajax/recettesByCollect_ajax.php";
        fetch (file)
        .then(x => x.text())
        .then(y => document.querySelector("recettesByCollect").innerHTML = y);
        }
    }

Enfin ma page recettesByCollect_ajax.php :

Code:

1
2
3
4
5
6
7
8
9
10
 
$recettesByCollection = $recettesController->getRecByCollection($id_coll = $_GET['id_coll'] ?? null);
 
?>
<option selected>recettes</option>
  <?php foreach($recettesByCollection as $recetteCollect) :?>
      <option value="<?=$recetteCollect['id_rec']?>">
              <?=$recetteCollect["titre"]?>
      </option> 
  <?php endforeach?>

merci beaucoup pour votre aide

Bonjour,

Citation:

Quand je sélectionne une collection on dirais que la page s'actualise.

cela est dû à cette ligne :
Code:

1 2 //j'ajoute l'id de la collection à mon URL window.location.href = "vueCollections.php?id_coll=" + collection_text;
Ce que je ne comprends pas c'est pourquoi en Ajax tu interroges une page, "../ajax/recettesByCollect_ajax.php", alors qu'en soumission directe tu en interroges une autre, "vueCollections.php" !

De plus tu ne passes pas de paramètres lors de la soumission Ajax.

Je partirais à priori sur quelque chose comme :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 const oSelect = document.querySelector('.mescollections'); oSelect.addEventListener("change", chargerRecByCollection); function chargerRecByCollection() { const textSelected = this.value; if (textSelected != "") { //j'ajoute l'id de la collection à mon URL const file = "../ajax/recettesByCollect_ajax.php?id_coll=" + textSelected; //recuperation des recettes pour le select page collections fetch(file) .then(x => x.text()) .then(y => document.querySelector("recettesByCollect").innerHTML = y); } }

Bonjour,
je vous remercie de votre aide
mon idée est de sélectionner la collection dans la liste du select (l'utilisateur peut avoir crée plusieurs collections).
Dans le deuxième select afficher la liste des recettes qui font parti de la collection sélectionnée, donc j'appel la page recettesByCollect_ajax.php
puis lors du submit du formulaire suppression de la recette choisi.
j'ai testé votre code mais mon deuxième select reste vide, j'ai l'impression que la page n'est pas appelée. J'ai bien mis aussi dans mon premier select onChange="...()"Hier soir j'ai adapté un code avec XMLHttpRequest() en mettant un paramètre : dans mon deuxième select par contre j'ai juste la première ligne de la page recettesByCollect_ajax.php, tout ce qu'il y a à l'intérieur de la boucle n'apparait pas (ma requête), j'ai même essayé de mettre une balise option en dur après la boucle mais rien...
cette ligne ci apparait :

Code:

<option selected>recettes</option>

voici mon code testé hier
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function showRec(str) { if (str == "") { document.querySelector(".recettesByCollect").innerHTML = ""; return; } else { alert(str); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.querySelector(".recettesByCollect").innerHTML = this.responseText; alert(this.responseText); } }; xmlhttp.open("POST","../ajax/recettesByCollect_ajax.php?q="+str, true); xmlhttp.send(); } }
Code:

onChange="showRec(this.value)"

alert() c'était juste pour tester et il m'envoie bien l'id du premier select
merci

20/01/2023, 17h29
NoSmoking

:koi:
côté client, tu fais

Code:

xmlhttp.open("POST","../ajax/recettesByCollect_ajax.php?q="+str, true);

et côté serveur :

Code:

$recettesByCollection = $recettesController->getRecByCollection($id_coll = $_GET['id_coll'] ?? null);
21/01/2023, 12h12
Matteo53

Bonjour,
merci oui je n'avais pas vu désolé
bonne journée.