색상 선택기에 script.alicio.us 사용 -> php GD

Question

색상 선택 도구를 사용하여 두 가지 색상을 선택한 다음 두 가지 색상을 사용하여 php/GD를 통해 그라디언트로 사각형을 그립니다. 나는 현재 prototype.js에/script.alicio.us 함께 일하고 있어요

는

그래서, 두 가지 색상 피커 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에 동의 내가 제대로 이해한다면, 당신과 같이 아약스와 함께이 작업을 수행 할 수있는이 클라이언트 측을, 그러나 것은 :

<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); 
}