Bouton de couleur

Résolu/Fermé

Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019 - 7 févr. 2019 à 15:50
Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019 - 8 févr. 2019 à 13:30

Hello a tous je sollicite votre aide encore une fois
J'ai un formulaire avec des boutons je voudrais récupérer la couleur des boutons en fonction du click de l'utilisateur " En gros tous mes boutons sont vert pas défaut quand l'utilisateur click il devient rouge une fois que la couleur a été récupére on envoie le formulaire par mail.

<style>
  input[type=button] {
    background-color: #00ff00;
  }
  input[type=button].red-btn {
    background-color: #ff0000;
  }
</style>
<input type="button" class="button button" id="1" onclick="ch(this)" />
<script type="text/javascript">
function ch(btn) {
  if(element.classList.contains("red-btn"){
    element.classList.remove("red-btn");
  }else{
    element.classList.add("red-btn");
  }
}
</script>

A voir également:

Bouton de couleur
Excel cellule couleur si condition texte - Guide
Somme si couleur - Guide
Un mot est caché dans l’en-tête du document. pour le trouver, modifiez sa couleur. ✓ - Forum Bureautique
Code couleur transparent - Forum Webmastering
La boite a couleur - Télécharger - Divers Photo & Graphisme

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 698
7 févr. 2019 à 16:23

Bonjour,

Pour envoyer les données en "submit" tu dois forcément utiliser des champs
de type INPUT ou SELECT ou TEXTAREA.
Tu pourrais donc, en javascript, récupérer la couleur de chaque bouton et stocker le resultat dans un input caché "hidden" ou sinon, remplacer tes "button" par des checkboxes (que tu stylise comme des boutons)

Ou sinon... ne pas faire de submit mais utiliser de l'ajax....

Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
7 févr. 2019 à 16:32

Bonjour a vous

Mes boutons sont bien du type "INPUT" Donc il est possible de le faire en javascript "ps je n'est jamais entendu parlé de caché hidden"
Et ajax encore moins

jordane45 Messages postés 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 698 > Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
7 févr. 2019 à 16:39

Les boutons contiennent une "value" ... c'est uniquement cela que tu récupéreras...
Et comme tu te sers des "value" pour donner un " titre " à tes boutons.. tu ne peux pas y mettre l'information concernant la couleur...(ou, plus exactement, la CLASS )

Perso... je mettrais, avec CHAQUE bouton... un INPUT TYPE CHECKBOX HIDDEN et, lors du clic sur le bouton je cocherai (ou décocherai) la checkbox correspondante en même temps que tu changes la couleur....
Ainsi, lors du SUBMIT de ton formulaire tu serais en mesure de savoir quels boutons sont "cliqués"

ps je n'est jamais entendu parlé de caché hidden"

Ben c'est donc chose faite.
Et si tu ne sais pas à quoi cela correspond ni comment s'en servir ... google est là....

Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
7 févr. 2019 à 16:57

Je comprends le principe j'aurais un truc comme ca

"<input type='checkbox' name='wildid' value=1 checked style='visibility:hidden'>";

Et pour changer la couleur quand on clique sur le bouton

 function ch(btn ) { 
 
  var colorBtn = stringRGB2HEX(btn.style.backgroundColor);
  if(colorBtn == '#ff0000'){
    btn.style.backgroundColor = '#00ff00'; 
  }else{
    btn.style.backgroundColor = '#ff0000';
  }
}
</script>

et le fait de cocher/décocher la case ? Tu as oublié de le mettre dans ton code....
Pour te faciliter la chose.. pense à mettre des ID à tes checkboxes (un ID unique et différent par checkBox )

// Check
document.getElementById("id_de_la_checkbox").checked = true;

// Uncheck
document.getElementById("id_de_la_checkbox").checked = false;

Jordi.D Messages postés 51 Date d'inscription vendredi 11 janvier 2019 Statut Membre Dernière intervention 8 février 2019
7 févr. 2019 à 19:39

Je ne sais pas si j'ai un problème au niveau du css mais mes checkbox ne sont pas " colorée"

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Bouton ON OFF, O ou I ?

Transparence en tete et bas de page

sertissage des cables rj45

Quel est la touche shift sur le clavier