use script.alicio.us for color picker -> php GD

Question

I want to use a color picker to pick two colors and then draw a rectangle with a gradient using the two colors, via php/GD.

I'm currently working with prototype.js/script.alicio.us

So, two color picker html fields:

<form>
<p>color 1 #<input type="text" id="colorfield1" value="FF33FF"></p>
<p>color 2 #<input type="text" id="colorfield2" value="CC3366"></p>
</p>
</form>

With prototype.js, it looks like I need to create some kind of event listener and then trigger off my php script from that.

I think it should look a little bit like this, but am not certain:

<script type="text/javascript">
Event.observe(window, 'load', function() {
  Event.observe('colorfield1', 'submit', what goes here???);
  Event.observe('colorfield2 , 'submit', what goes here???);
});
</script>

I'm using this color picker code: http://code.google.com/p/colorpickerjs/

Answer 1

I agree with @clockworkgeek about trying to do this client-side, but if I understand you correctly, you could do this with ajax like so:

<script type="text/javascript">
Event.observe(window, 'load', function() {
  Event.observe('colorfield1', 'submit', doFormSubmit);
  Event.observe('colorfield2 , 'submit', doFormSubmit);
});

function doFormSubmit(event) {
  // fire off an ajax request/updater, sending along the values
  // in colorfield1 and colorfield2
  new Ajax.Updater('myImageDisplay', '/myPhpScript.php', {
    parameters: {
      colorfield1: $F('colorfield1'),
      colorfield2: $F('colorfield2')
    }
  });
}
</script>

This will make a request to your php script with the data from the input fields. Be sure to check out the documentation for Ajax Updater to see if this is what you need.

Answer 2

From the page you linked it looks like the onClose event will be most useful. (onUpdate will fire too often.)

If you are generating an image server-side then it makes sense to use an image element instead of AJAX.

<form>
    <p>color 1 #<input type="text" id="colorfield1" value="FF33FF"></p>
    <p>color 2 #<input type="text" id="colorfield2" value="CC3366"></p>
    <img src="" id="gradient" />
</form>

document.observe('dom:loaded', function() {
    new Control.ColorPicker('colorfield1', { onClose: update });
    new Control.ColorPicker('colorfield2', { onClose: update });
});

function update(event)
{
    // `this` is the input field
    var url = this.form.action;
    url += (action.indexOf('?') < 0 ? '?' : '&') + this.form.serialize();
    $('gradient').writeAttribute('src', url);
}