système de notes avec étoiles

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

Code:

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:

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:

<i type="submit" class="bi bi-star"data-value="1"></i>

merci pour vos conseils

à part l'enregistrement du vote, que voulez-vous qu'il se passe au moment du clic sur une étoile ?
si c'est juste l'enregistrement du vote, vous pouvez faire une requete http avec la fonction fetch :
https://developer.mozilla.org/fr/docs/Web/API/fetch

Bonjour,

Si vous voulez soumettre le formulaire d'une façon classique (sans utiliser javascript), vous pouvez mettre vos <i> dans des <button type="submit"></button> et modifier l'apparence des boutons via CSS, comme ceci :
Code:

1 2 <button name="btnValue" type="submit" value="1"><i class="bi bi-star"></i></button> 
Comme ça, lorsque vous cliquez sur un bouton, vous pouvez ensuite récupérer sa valeur en PHP via $_POST["btnValue"]

Bonjour,
Je vous remercie pour vos conseils, ah donc n'importe quel élément peut avoir le rôle d'un button en l'entourant de cette balise. Merci j'apprend énormément sur ce forum.
Je vais aussi regarder la fonction fetch() pour apprendre encore plus...
Il me reste un dernier souci pour ajouter et supprimer une classe et avoir l'étoile pleine mais je vais ouvrir un nouveau post dans le forum adapté.
Merci encore.