Bonjour, je rencontre un problème durant mon codage.

Je dois réalisé un site web pour une équipe de foot, ce site web permet de créer des séance de tir au but par l'entraineur. Donc l'entraineur a une page de paramétrage ou il choisit son équipe et également la zone de tir de réussite. Pour ce faire j'utilise des bouton pour représenter la cage de foot comme ceci :
[1] [2] [3]
[4] [5] [6]
Ces bouton représente différentes position dans la cage de foot.

Tout d'abord je voulais que tout les boutons soient de couleur rouge par default donc = 0. Et lorsque l'entraineur clique sur un ou plusieurs boutons, il passe a 1. Une fois la selection de l'entraineur fini il clique sur un bouton de type "submit" qui nous envois sur une page php afin de rentrer les informations de cette seance dans notre base de donnée. Or malgrés avoir essayer avec un $_POST je ne reussie pas a récupérer la valeur de mon button dans mon php. Voici le code realisé :
code javascript pour le changement de couleur lorsqu'on clique. (J'utilise du java suite a une recherche sur internet)

<script>
function setColor(e)
{
var target = e.target,
status = e.target.classList.contains('active');

e.target.classList.add(status ? 'inactive' : 'active');
e.target.classList.remove(status ? 'active' : 'inactive');
}
</script>

Pour mes boutons :

<form action="creer_seance.php" method="post">
<h1>Nouvelle seance</h1>
<b>Nom de l'entraineur :</b>
<select name="nom" required>
<option value="">Choisir
<?php
$liste = new CSeance();
$liste->_bdd = $bdd;
$liste->afficherListe();
?>


</select> <br>

<label><b>Categorie :</b></label>
<select name="categorie" class="categorie" required>
<option value="">aucune</option>
<option value="U7">U6/U7</option>
<option value="U9">U8/U9</option>
<option value="U13">U10-U13</option>
<option value="U15+">U15+</option>
</select> <br>

Boutton qui pose problème :

<b>Zone de tir :</b>
<div class="cage" role="group" aria-label="Groupe de boutons">
<input type="button" id="button" class="inactive" name="btn1" value = "1" style= "color:white; padding-right: 20px; " onclick="setColor(event);this.form.choice.value=this.value;"; required />
<input type="button" class="inactive" id="button" value = "2" style= "color:white; padding-right: 20px; " onclick="setColor(event)";/>
<input type="button" class="inactive" id="button" value = "3" style= "color:white; padding-right: 20px; " onclick="setColor(event)";/>

<br>
<input type="button" class="inactive" id="button" value = "4" style= "color:white; padding-right: 20px; " onclick="setColor(event)";/>
<input type="button" class="inactive" id="button" value = "5" style= "color:white; padding-right: 20px; " onclick="setColor(event)";/>
<input type="button" class="inactive" id="button" value = "6" style= "color:white; padding-right: 20px; " onclick="setColor(event)";/>
<br>
<input type="button" class="inactive" id="button" value = "7" style= "color:white; padding-right: 20px; " onclick="setColor(event)";/>
<input type="button" class="inactive" id="button" value = "8" style= "color:white; padding-right: 20px; " onclick="setColor(event)";/>
<input type="button" class="inactive" id="button" value = "9" style= "color:white; padding-right: 20px; " onclick="setColor(event)";/>

<input type="submit" id='submit' value='CREER' name="submit">
<a class="inscr" href="connexion.php">Ancienne</a>
</form>

</div>

Enfin le CSS pour le changement de couleur :

.active
{

background-color: #7FFF00;
}

.inactive
{

background-color: #FF0000;
}

Merci de votre aide je galère dessus depuis quelque jour.

Bonjour,

Quel est le code PHP qui récupère les valeurs POST ?
Quelles sont les valeurs POST que tu récupères en fonction des boutons activés ?
C'est normal que seul le premier bouton ai un attribut required ? A quoi est censé servir l'instruction "this.form.choice.value=this.value;" sur ce bouton ? Il y a un autre champ nommé choice qui contient les valeurs des boutons activés ?

Une autre solution p-e plus simple en HTML serait d'utiliser des checkbox à la place des boutons. Tu peux bien sûr modifier le style des checkbox pour les afficher sous forme de boutons, et tu devrais pouvoir récupérer plus facilement les positions en fonction des checkbox cochées.

Bonjour,

Justement mon input est de type "button" donc je ne reçois aucune valeur dans mon $_POST.

Et l'instruction "this.form.choice.value=this.value;" était simplement un test que j'ai retiré par la suite car j’ai essayé des solution trouver sur internet mais sans succé.

D'accord je vais me renseigner dessus mais pouvons nous avoir un changement de couleur si nous cochons notre zone ? et pouvons nous la décocher et notre zone redevient a sa couleur d'origine.

Oui, tu peux modifier en CSS le style des checkbox (plutôt via un label) pour les afficher sous forme de boutons avec une couleur différente selon si la case est cochée ou non.
Un petit exemple : https://jsfiddle.net/709euknm/

Merci beaucoup de l'aide !