Récupérer le champ input correspondant au clic

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:

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:

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.

Code:

$(this)

Comment je vais utilise ?

Code:

$(this)

Code:

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

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

Citation:

<empty string>

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:

1 2 3 $(".cbtn").on("click",function(){ console.log( $(this).find('.cscolor').val() ); })
A noter au passage c'est .val() et pas . value() :oops:

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

1 2 3 $(".cscolor").on("click",function(){ console.log( $(this).val() ); })
https://jsfiddle.net/42Lf7cmw/

Merci SpaceFrog sa fonctionne bien avec ce bout de code :
Code:

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