Bonjour,
Dans le cadre d'un petit projet sites de recettes je voudrais que l'utilisateur une fois connecté puisse noter la recette en cliquant sur les étoiles, je ferais une requete preparée pour que la note soit dans ma table de base de donnée. D'habitude je fais des formulaires avec des button submit avec method post mais la je suis un peu perdu... sans button submit
Pour éviter d'avoir un input ou button submit et faire apparaitre que les étoiles comment faire ? (je n'ai pas idée de tout..)
voici mon code (pour l'instant j'ai fait juste la partie JS et HTML), j'ai un input caché qui a comme value, la valeur des étoiles une fois cliqué dessus, j'ai suivi un tutoriel:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
<form action="" method="post">
        <i class="bi bi-star"data-value="1"></i>
        <i  class="bi bi-star"data-value="2"></i>
        <i class="bi bi-star"data-value="3"></i>
        <i class="bi bi-star"data-value="4"></i>
        <i class="bi bi-star"data-value="5"></i>
        </div>
        <input type ="hidden" name="note" id="note" value="0">
        </form>
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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
window.onload = () => {
 
    //selectionner les etoiles
    const stars = document.querySelectorAll("i");
 
 
    //selectionner l'input
    const note = document.querySelector("#note");
 
 
   //on boucle sur les etoiles pour ajouter un ecouteur d'evenement
   for(let star of stars) {
        star.addEventListener('mouseover', function() {
            resetStars();
            this.style.color=" #DC3C35";
 
 
            //élément précédent dans le DOM( même niveau)
            let previousStar= this.previousElementSibling;
 
            while(previousStar) {
                //passage de l'étoile qui précède en rouge
                previousStar.style.color="red";
                //récuperation de l'étoile qui la pécède
                previousStar= previousStar.previousElementSibling;
            }
        });
 
        //on ecoute le click
        star.addEventListener("click", function() {
            note.value = this.dataset.value;
 
        });
 
        star.addEventListener("mouseout", function(){
            resetStars(note.value);
        })
   }
 
    function resetStars(note=0) {
        for(let star of stars) {
            if(star.dataset.value > note) {
                star.style.color= "white";
            } else {
                star.style.color="red";
            }
        }
    }
 
}
j'ai essayé de faire celle-ci pour chaque i et testé en GET mais je pense que ce n'est pas la bonne méthode :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<i type="submit" class="bi bi-star"data-value="1"></i>
merci pour vos conseils