How to have a div take on the value of a form field?

**jeanpaul1979** · Apr 22, 2007, 12:43

Hi, i have a form with several input fields (color codes) that are linked to accompanying div boxes (color swatches).

I have put an example of the script here http://startbron.nl/colorpicker/sample.html. I have also uploaded the entire script here http://www.startbron.nl/colorpicker.rar

The swatches in the example are supposed to render the color that is in the accompanying input field.

How can i do this?

**Logic Ali** · Apr 22, 2007, 15:36

Originally Posted by jeanpaul1979

Hi, i have a form with several input fields (color codes) that are linked to accompanying div boxes (color swatches).

I have put an example of the script here http://startbron.nl/colorpicker/sample.html. I have also uploaded the entire script here http://www.startbron.nl/colorpicker.rar

The swatches in the example are supposed to render the color that is in the accompanying input field.

How can i do this?

I assume that one is supposed to enter six hex digits. If so it need be no more complicated than this:

Code:

<script type="text/javascript">

function setBg(cString, elemId)
{
 if( (cString=cString.replace(/\s+/g,'')).match(/^#?[a-f0-9]{6}$/i) )
 {
  if(cString.charAt(0)!='#')
   cString='#'+cString;  
  document.getElementById( elemId ).style.backgroundColor=cString; 
 }
}

</script>
</head>
<body>
Enter colour values as six hex digits preceded optionally by #.<br /><br />
<form>
<div id="input1_swatch">&nbsp;</div><input id="input1" type='text'onkeyup="setBg(this.value,'input1_swatch')"/><br /><br />
<div id="input2_swatch">&nbsp;</div><input id="input2" type='text' onkeyup="setBg(this.value,'input2_swatch')"/>
</form>

**jeanpaul1979** · Apr 23, 2007, 03:03

Thanks! That was very helpfull. I'm now trying to figure out how to create the same behavior when the color code is pasted instead of typed.

Any suggestions?

**jeanpaul1979** · Apr 23, 2007, 05:45

I have run across another problem.
When i use the script in combination with 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

**siteguru** · Apr 23, 2007, 06:13

Last problem .. you are passing 'input1_swatch' in both cases.

Code:

<div id="input1_swatch">&nbsp;</div><input id="input1" onkeyup="setBg(this.value,'input1_swatch')" /><br /><br />
<div id="input2_swatch">&nbsp;</div><input id="input2" onkeyup="setBg(this.value,'input2_swatch')" />

**Logic Ali** · Apr 23, 2007, 08:57

Originally Posted by jeanpaul1979

Thanks! That was very helpfull. I'm now trying to figure out how to create the same behavior when the color code is pasted instead of typed.

Any suggestions?

The way I've done this previously is with a periodic monitoring algorithm, that scans fields for changes and acts accordingly.

**jeanpaul1979** · Apr 23, 2007, 10:45

You mean a script that is triggerd every x seconds and then updates all swatches? I could see that work, but the user that pastes the color code won't get direct feedback so it can work a bit confusing.
It's a minor thing though, i can live without. I'm more concerned about getting the script to work in documents with a doctype.

**Logic Ali** · Apr 23, 2007, 18:04

Originally Posted by jeanpaul1979

You mean a script that is triggerd every x seconds and then updates all swatches? I could see that work, but the user that pastes the color code won't get direct feedback so it can work a bit confusing.

Not if it's done every half second.

It's a minor thing though, i can live without. I'm more concerned about getting the script to work in documents with a doctype.

Looks like a problem related to the effect of doctype on offsetHeight. The original author should have a fix for that.

**jeanpaul1979** · Apr 24, 2007, 11:47

You are right, 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);

to:

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

Works with a doctype definition now

About having a periodic monitoring algorithm that fires every .5 second, i assume that client side preformance suffering is negligible?

**Logic Ali** · Apr 24, 2007, 16:46

Originally Posted by jeanpaul1979

About having a periodic monitoring algorithm that fires every .5 second, i assume that client side performance suffering is negligible?

I doubt it unless you've got something seriously intensive going on. Mine just compares two strings and takes no action unless they differ.

The SitePoint Forums have moved.

User Tag List

Thread: How to have a div take on the value of a form field?

Thread Tools

Display

How to have a div take on the value of a form field?

Bookmarks

Bookmarks

Posting Permissions