View Full Version : How to have a div take on the value of a form field?

Apr 21st, 2007, 12:54 PM
Hi, i have a form with several input fields that are all linked to accompanying div boxes.
The input fields contain the color "code" and the div boxes are supposed to be the color that is in the accompanying input field.

so for example:
#input1div {
background-color: "the value from the accompanying input field here"

How can i have the div boxes use the value from the accompanying input fields as their background-color value?

Apr 21st, 2007, 01:03 PM
You will have to do something like,

document.getElementById('divid').style.background-color = document.getElementById('inputid').value;
I've not tested this but it should work.

Apr 22nd, 2007, 02:56 PM
Thanks for your input Umang, i didn't get this to work though. I'm probably missing out on some details.

I have put a sample of the script here (it's a very nice Photoshop style color picker script)
http://startbron.nl/colorpicker/sample.html and i have also uploaded the script code here http://www.startbron.nl/colorpicker.rar
The swatch in the sample is supposed to reflect the color that is in the accompanying input field.

I'm currently working on a big PHP project and i need this one thing done in Javascript, can someone help me out please?

Apr 22nd, 2007, 10:25 PM
function hColorPickerMouseDown(){
if(cp.cpColor.r || (cp.cpColor.r===0)) cp.cpColor = '#'+hex(cp.cpColor.r)+hex(cp.cpColor.g)+hex(cp.cpColor.b);
cp.cpInput.value = cp.cpColor;

The color picker is nice but as it is not your code you should leave the authors credit intact, Almost did not answer because of this.

Apr 23rd, 2007, 11:18 AM
What do you mean? I never said it was mine and there where no credits in the file. The script is from this tutorial: http://www.webreference.com/programming/javascript/mk/column3/

I have just finished exactly the same solution you have posted :), thanks for helping.

Apr 23rd, 2007, 11:23 AM
Edit: i have ran across an issue with the script in combination with a doctype. When i use a doctype (wich my site requires for the centering of div boxes) the color picker always shows up below the last input field instead of below it's accompanying field.

I don't feel confident i can tackle this issue with my currently still limited knowledge of javascript, though i am trying.
Help is welcome and very much appreciated.

I have updated both samples with the new code. http://startbron.nl/colorpicker/sample.html & http://www.startbron.nl/colorpicker.rar

I am now also trying to create a behavior that updates the swatch when the code is pasted in the input field.
I have tried several event handles but none work with the paste action.

Any suggestions?

Apr 24th, 2007, 07:42 PM
I emailed the author and he told me to change this line

cp.ColorPicker.style.left = inpPos.x;
267 cp.ColorPicker.style.top = inpPos.y+parseInt (cp.cpInput.offsetHeight);


cp.ColorPicker.style.left = inpPos.x+'px';
cp.ColorPicker.style.top = (inpPos.y+parseInt(cp.cpInput.offsetHeight))+'px';

Works with a doctype definition now :)