Take the tour ×

There is a great http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

I need to do 2 things:

a. Hide color code that we can see under

<input readonly="readonly" type="text" id="color"  name="color" value="#123456" />

b. Keep this code to some other hidden field.

How it can be done?

Thank you!

share|improve this question
Do you want to remove the color code from the readonly input and keep it in another input ? –  Sheikh Heera Sep 1 '12 at 2:02
@SheikhHeera. Correct. But another input should be hidden. I just don't want to give user too many code. Just an option to see the selected color only and not the color code. –  Clark Kent Sep 1 '12 at 2:04
Check my answer. –  Sheikh Heera Sep 1 '12 at 2:43
add comment

2 Answers

up vote 4 down vote accepted

Try this


    <input type="text" id="color" name="color" />
    <input type="hidden" id="colorValue" name="colorValue" />
<div id="colorpicker"></div>​


$(document).ready(function() {
    var picker = $.farbtastic('#colorpicker');
    picker.linkTo(function onColorChange(color) {


share|improve this answer
Fantastic! ++++100 Ty! –  Clark Kent Sep 1 '12 at 14:30
Thank you very so much :-) –  Sheikh Heera Sep 1 '12 at 16:10
add comment

I cannot see the script you're referring, page won't load, but I'm pretty sure you just need to change the type into hidden, when it's hidden you can also remove the readonly attribute:

<input type="hidden" id="color" name="color" value="#123456" / >

I assume that script automatically updated the field you mentioned, if it's hidden it will still update it.

share|improve this answer
add comment

Your Answer


