Discussion :

[Matteo53]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

Bonjour,

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

cela est dû à cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Matteo53]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<option selected>recettes</option>

voici mon code testé hier

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

Sélectionner tout - Visualiser dans une fenêtre à part

onChange="showRec(this.value)"

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

[NoSmoking]

côté client, tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et côté serveur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$recettesByCollection = $recettesController->getRecByCollection($id_coll = $_GET['id_coll'] ?? null);

[Matteo53]

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