使用script.alicio.us - > PHPのGD

Question

は、私はPHP/GDを経由して、2つの色を選択して、2つの色を使用して勾配で四角形を描画するカラーピッカーを使用します。私は現在、prototype.jsの/ script.alicio.usので

を持つ2つのカラーピッカーのhtmlフィールドを働いている

：prototype.jsので

<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> 

私が作成する必要があるように、それが見えますイベントリスナーのいくつかの種類とそれから私のPHPスクリプトをトリガーします。

は、私はそれがこのように少し見えるべきだと思いますが、確かではない午前：私はこのカラーピッカーのコードを使用してい

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

： http://code.google.com/p/colorpickerjs/

Answer 1

私がしようとしてについて@clockworkgeekに同意しますこのクライアントサイドを行いますが、私が正しく理解している場合、ajaxでこれを行うことができます：

<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> 

これはあなたにリクエストを行います入力フィールドからのデータを含むPHPスクリプト。これが必要なものかどうかを確認するには、Ajax Updaterのマニュアルを参照してください。

Answer 2

ページから、onCloseイベントが最も有用であろうように見えるリンク。 （onUpdateは、あまりにも頻繁に発生します。）

を使用すると、画像サーバ側を生成している場合、それは代わりに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); 
}