Vark: Help for Alice M.

Attaching a colorpicker to an input

by John Schulz

HTML

<link rel="stylesheet" href="http://www.freewebs.com/yoko16/style.css">
<link rel="stylesheet" href="http://www.freewebs.com/yoko16/colorpicker.css">
<script src="http://www.freewebs.com/yoko16/jquery.js"></script>
<script src="http://www.freewebs.com/yoko16/colorpicker.js"></script>
<form>
    <input id="colorpick" type="text" name="field" class="textInput" />
    <input type="image" src="http://i245.photobucket.com/albums/gg53/Its_not_another_love_story/My%20Website%20Images/searchbutton.jpg" />
</form>

JavaScript

$(function() {
    var $picker_input = $('#colorpick');
    var $search_form = $('form');
    
    $search_form.bind('submit', function (e)
    {
        var color = $picker_input.val();
        e.preventDefault();
        alert('Submit '+ color +' to your server');
        /* make $.ajax call here */
    });
    
    $picker_input.ColorPicker({
        onChange: function(hsb, hex, rgb) {
            $picker_input.val('#' + hex); // or whatever you want to see here
        }
    });
});