Multiple Color Pickers on one page with links to input boxes

Question

I am using jQuery ColorPicker Plugin and I would like to use this multiple times on one page and each color picker box must be connected to an input field.

I have the following HTML code

<div class="r" style="position: relative; height: 50px;">
  <div class="color-picker2">
    <div></div>
    <input type="text" name="idesign-menu-level-0[color]" id="colorpickerField" class="color-picker-input" value="" />
  </div>
  </div>

  <div style="clear:both"></div>

    <div class="r" style="position: relative;">
  <div class="color-picker2">
    <div></div>
    <input type="text" name="idesign-menu-level-0[color]" id="color" class="color-picker-input" value="" />
  </div>
  </div>

I have the following jQuery code

(function($) {
    $('.color-picker2').each(function(o) {
        var _this = this;
        $(this).ColorPicker({
                livePreview: true,
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {


                }
            });
    });
}) (jQuery)

I have the code up to the onChange action but I do not know how to link this change to the relevant input field. If possiable I would like the color of the ColorPicker to change if the hex code is entered into the input field too.

I am sure that there is a way to link these two but I just do not know how!

Thanks in advance

Carl

Never mind now just figured it out with the following jQuery code

(function($) {
    $('.color-picker2').each(function(o) {
        var colorPicker = $(this);
        var colorPickerInput = $(this).children('input');
        $(this).ColorPicker({
                livePreview: true,
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $(colorPickerInput).val('#' + hex);
                }
            });
    });
}) (jQuery)

Answer 1

The answer is

(function($) {
    $('.color-picker2').each(function(o) {
        var colorPicker = $(this);
        var colorPickerInput = $(this).children('input');
        $(this).ColorPicker({
                livePreview: true,
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $(colorPickerInput).val('#' + hex);
                }
            });
    });
}) (jQuery)