Bouton de couleur [Résolu/Fermé]

Signaler
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
Statut
Membre
Dernière intervention
8 février 2019
-
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
Statut
Membre
Dernière intervention
8 février 2019
-
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>

1 réponse

Messages postés
28912
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 juillet 2020
2 602
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....


Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
Statut
Membre
Dernière intervention
8 février 2019

J'ai trouvé un truc comme ca
.box{
    visibility:hidden;
}

.checkbox{
    width: 20px;
    height: 20px;
    padding: 0px;
    background: green;
    display: block;
    clear: left;
    float: left;
}

.checked{       
    background: red;
    background-position: 0px -50px;
}

<label>
    <span class="checkbox">
        <input type="checkbox" name="" class="box"/>
    </span>
</label>

$(function(){
    $(".box").click(function(){
        var parent = $(this).parent();
        
        if($(this).is(':checked')){
            parent.addClass("checked");
        }else{
            parent.removeClass("checked");
        }
        
        //info
        console.log($(this).is(':checked'));
    });
})
Messages postés
28912
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 juillet 2020
2 602 >
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
Statut
Membre
Dernière intervention
8 février 2019

As tu inclus jquery ?
Car ce code en a besoin.
Messages postés
28912
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 juillet 2020
2 602
Regarde ça.... sans JS .. que du checkbox et du css ...
http://jsfiddle.net/zAFND/6/
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
Statut
Membre
Dernière intervention
8 février 2019

Bonjour Jordane45
Pour répondre non je n'est pas inclus jQuery j'ai juste trouvé cette exemple sur le net
et pour le deuxième lien il n'y a pas de CSS
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
Statut
Membre
Dernière intervention
8 février 2019

Oups j'ai rien dis j'ai trouvé le CSS wouaaah sa fonctionne vraiment bien
Donc maintenant si je vais récupéré les checkboxs quand elles sont coché vu qu'elles ont le même rôle je peux les mettre sous forme de Array
// Le tableau $_POST['a'] La valeurs des checkboxs
$monArray = !empty($_POST['a']) ? $_POST['a'] : NULL;

if(!empty($monArray)){ // si mon array n'est pas vide
  foreach($monArray as $valeur){
     echo " <br> La checkbox $valeur a été cochée<br>";


Pour récupéré les checkbox coché