Menu

Bouton de couleur [Résolu]

Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
Dernière intervention
8 février 2019
- - Dernière réponse : Jordi.D
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
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>
Afficher la suite 

Votre réponse

1 réponse

Messages postés
24633
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 février 2019
1859
0
Merci
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
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'));
    });
})
jordane45
Messages postés
24633
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 février 2019
1859 > Jordi.D
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
Dernière intervention
8 février 2019
-
As tu inclus jquery ?
Car ce code en a besoin.
jordane45
Messages postés
24633
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 février 2019
1859 -
Regarde ça.... sans JS .. que du checkbox et du css ...
http://jsfiddle.net/zAFND/6/
Jordi.D
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
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
Jordi.D
Messages postés
51
Date d'inscription
vendredi 11 janvier 2019
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é
Commenter la réponse de jordane45