Discussion :

[waraiwarai]

Bonjour la communauté,

Je rencontre des difficultés pour récupérer la valeur d'un sélecteur de couleur suite à un clique de la souris.

Voici le code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Selecteur de couleur :
<a href="" data-toggle="dropdown" class="text-right"><i class="zmdi zmdi-palette"></i></a>
 
<div class="dropdown-menu dropdown-menu-right">
    <div class="dropdown-item theme-switch">
        Theme Switch
 
        <div class="btn-group btn-group-toggle btn-group--colors" data-toggle="buttons">
            <label class="btn bg-green active cbtn"><input id="cgreen" class="cscolor" type="radio" value="green" autocomplete="off" checked></label>
            <label class="btn bg-blue cbtn"><input id="cblue" class="cscolor" type="radio" value="blue" autocomplete="off"></label>
            <label class="btn bg-red cbtn"><input id="cred" class="cscolor" type="radio" value="red" autocomplete="off"></label>
            <label class="btn bg-orange cbtn"><input id="corange" class="cscolor" type="radio" value="orange" autocomplete="off"></label>
            <label class="btn bg-teal cbtn"><input id="cteal" class="cscolor" type="radio" value="teal" autocomplete="off"></label>
 
            <div class="clearfix mt-2"></div>
 
            <label class="btn bg-cyan cbtn"><input id="ccyan" class="cscolor" type="radio" value="cyan" autocomplete="off"></label>
            <label class="btn bg-blue-grey cbtn"><input id="cbluegrey" class="cscolor" type="radio" value="blue-grey" autocomplete="off"></label>
            <label class="btn bg-purple cbtn"><input id="cpurple" class="cscolor" type="radio" value="purple" autocomplete="off"></label>
            <label class="btn bg-indigo cbtn"><input id="cindigo" class="cscolor" type="radio" value="indigo" autocomplete="off"></label>
            <label class="btn bg-brown cbtn"><input id="cbrown" class="cscolor" type="radio" value="brown" autocomplete="off"></label>
        </div>
    </div>
</div><span class="erreur-message error-userThemeColor"></span>

Le sélecteur de couleur comprend dix (10) champs de type input et chaque champ correspond à une couleur dont la valeur est prédéfini. Mon objectif est de récupéré la valeur du champ qui va recevoir le clique de la souris, en suite transmettre cette valeur au fichier php avec ajax.

Et voici mon code jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function(){
 
	$(".cbtn").on("click",function(){
 
		console.log("Oui il a clique");
 
        jQuery.ajax({
            type: 'POST',
            url: '/gestion/php/verif_form_update_theme_colors.php',
            data:{
                'valcolor': jQuery(".cscolor").val(),
 
                'sooc': jQuery('#userToken').val(),
            },
            success: function(data){
 
                if(data=='erreurMatchColor'){
 
                    jQuery(".error-userThemeColor").html("Veuillez selectionner une couleur valide !");
 
                }
 
            }
 
        });
 
	});
});

Mon soucis est que je ne sais pas quel bout de code utilisé pour récupérer la valeur du champ qui recevra le clique !

Merci à l'avance pour vos différentes solutions.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this)

[waraiwarai]

Comment je vais utilise ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this)

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(".cbtn").on("click",function(){
console.log( $(this).value() );
})

[waraiwarai]

J'obtiens ceci comme réponse sous la console :

<empty string>

[SpaceFrog]

ha désolé j'avais lu select et pas selecteur ...


En fait ton element qui prend le click avec la class cbtn est un label
qui lui contient l'element input qui a la value ...
cet input à une class cscolor

on peut donc recupérer le value par ce moyen

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(".cbtn").on("click",function(){
console.log( $(this).find('.cscolor').val() );
})

A noter au passage c'est .val() et pas . value()

[SpaceFrog]

Après tu peux aussi passer directement pas le click de l'input ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(".cscolor").on("click",function(){
console.log( $(this).val() );
})

https://jsfiddle.net/42Lf7cmw/

[waraiwarai]

Merci SpaceFrog sa fonctionne bien avec ce bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(".cbtn").on("click",function(){
console.log( $(this).find('.cscolor').val());
});