Seleccionar color e imprimir valor en un input

oshho · #1 (**permalink**) 15/05/2015, 09:22

Hola a todos, esperando que esten muy bien quisiera pedirles una pequeña ayuda, necesito generar unos cuadros con colores predefinidos, por ejemplo un cuadro verde uno rojo y uno azul, entonces al clickear un cuadro se imprime el valor en un input hidden, por ejemplo "Clickeo cuadro azul, el input se completa con el texto 'azul' ", eso sería, espero que me puedan ayudar gracias n.n

Ejemplo:

tanatos_neon · #2 (**permalink**) 15/05/2015, 09:44

Hola.

Esto es muy sencillo.

Como no se como tienes estructurado en codigo los colores he realizado un ejemplo.

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
.color { display:inline-block; width:20px; height:20px; cursor:pointer;}
.azul { background-color:blue;}
.rosa { background-color:pink;}
.rojo { background-color:red;}
.negro { background-color:black;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

<body>

<div class="color azul" id="azul" data-cl="azul"></div>
<div class="color rosa" id="rosa" data-cl="rosa"></div>
<div class="color rojo" id="rojo" data-cl="rojo"></div>
<div class="color negro" id="negro" data-cl="negro"></div>

<div style="clear:both"></div>
Recibo por id <input id="porid" value=""><br>
Recibo por data <input id="pordata" value="">
<script>
$('.color').click(function(){
		var valor = $(this).attr('id');
		var volar = $(this).data('cl');
		$('#porid').attr('value',valor);
		$('#pordata').attr('value',volar);
});
</script>
</body>
</html>

Tienes dos opciones, elije la que más te guste.
OPCION A: recibir el dato por el ID
OPCION B: recibir el dato por DATA

Ejecuta lo que te he pasado y veras lo sencillo que es.

oshho · #3 (**permalink**) 15/05/2015, 10:26

Muchas gracias tanatos, esta perfecto

ahora estoy viendo el tema de que cambie el borde del color seleccionado o poner un check como el de la imagen :P