Get the value of the input text on change
I have this code with jQuery colorpicker, onchange input #color shows the input value in hex; How can I do to get the color value on change?
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
<input type="text" id="color">
script: refreshSwatch is a function that gets the slider color value, it works;
function refreshSwatch(evt, ui) {
var red = $("#red").slider("value"),
green = $("#green").slider("option", "value"),
blue = $("#blue").slider("value"),
hex = hexFromRGB(red, green, blue);
$("#swatch").css("background-color", "#" + hex);
$("#color").val("#" + hex);
}
I want to get the value of the input color on change and then change the background color, but it doesn't work:
$(document).ready(function () {
$("#color").change(function(){
$("body").css("background-color", $("#color").val());
});
})
source to share
See workbox: http://jsbin.com/alefok/34/edit
Two things changed:
$("#colour").val("#" + hex).change();
in this function: function refreshSwatch(){}
//--^^^^^^^^^-------triggered the change above here.
and here:
$("#colour").change(function(){
$("body").css("background", $("#colour").val());
}).change(); //<-----trigger the change here
source to share
In your link:
http://jsbin.com/alefok/18/edit
You have a typo in your HTML:
<input type="text" id="colour">
But you are using the selector $("#color")
source to share
Try this, it works for u
function refreshSwatch(evt, ui) {
var red = $("#red").slider("value"),
green = $("#green").slider("option", "value"),
blue = $("#blue").slider("value"),
hex = hexFromRGB(red, green, blue);
$("#swatch").css("background-color", "#" + hex);
$("#color").val("#" + hex);
$("body").css("background-color", $("#colour").val());
}
source to share
When you're in the scope of your callback, you can use this
to reference the element in question. This is basically a suggestion, your code worked fine. The main problem with the jsbin example below was that there were discrepancies between the way the word "color" (or "color") was spelled.
Html
<input type="text" id="color">
Js
$(document).ready(function () {
$("#color").change(function(){
$("body").css("background-color", $(this).val());
});
});
source to share
Try to edit
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}
function refreshSwatch(evt, ui) {
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "option", "value" ),
blue = $( "#blue" ).slider( "value" ),
hex = hexFromRGB( red, green, blue );
$( "body" ).css( "background-color", "#" + hex ); //Here give body not div
$("#colour").val("#" + hex);
}
$(function() {
$( "#red, #green, #blue" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$( "#red" ).slider( "value", 255 );
$( "#green" ).slider( "value", 140 );
$( "#blue" ).slider( "value", 60 );
});
});
source to share