javascript getElementByID() to form value

[Rmazin]

Hello,

I am trying to implement a color picker for my users to choose their own custom background colors. I have an ajax color picker that works great but I am having issues passing the picked HEX value to my form. I am also using PHP.

Here is my javascript.

<div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">FFFFFF</div>

This displays the correct value on screen.

However I need to pass that value through a form so that I can update my DB for the user who picked.

My form field should look something like this:

<input type="hidden" name="color" id="plugHEX" value="VALUE FROM PICKER">

I tried putting javascript: getElementbyID(plugHEX); in that spot but it didn't work. Any ideas on how i can grab that value for the hidden field by using HTML, PHP or javascript?

Thanks

[Raffles]

getElementById is case sensitive, so for starters you have written it wrong. Also, don't use inline javascript (in the HTML). Put it in the HEAD.

window.onload = function() {
  document.getElementById('plugHEX').onmousedown = function() {
    document.getElementById('pickedValue').value = this.firstChild.nodeValue;
  }
}

Please note that your HTML is very wrong in that the ID has to be unique. Only one element can have a particular ID.

<div id="plugHEX">FFFFFF</div>
<input type="hidden" name="color" id="pickedValue" value="">

The javascript gets the value of the text in the DIV element (which I suspect is less than appropriate in this instance, but never mind that) and puts it in the value of the INPUT when the mousedown event fires on the DIV. That's static, though, so it's a fairly useless program. I imagine that if you're making a colour picker you have a large array of colour boxes and you should be looping through all of them, listening for mousedown (or why not click?) events.

[Rmazin]

getElementById is case sensitive, so for starters you have written it wrong. Also, don't use inline javascript (in the HTML). Put it in the HEAD.

window.onload = function() {
  document.getElementById('plugHEX').onmousedown = function() {
    document.getElementById('pickedValue').value = this.firstChild.nodeValue;
  }
}

Please note that your HTML is very wrong in that the ID has to be unique. Only one element can have a particular ID.

<div id="plugHEX">FFFFFF</div>
<input type="hidden" name="color" id="pickedValue" value="">

The javascript gets the value of the text in the DIV element (which I suspect is less than appropriate in this instance, but never mind that) and puts it in the value of the INPUT when the mousedown event fires on the DIV. That's static, though, so it's a fairly useless program. I imagine that if you're making a colour picker you have a large array of colour boxes and you should be looping through all of them, listening for mousedown (or why not click?) events.

Thank you I will try it, I didn't write the ajax code, i found a free plugin that I am trying to implement with my PHP code. I got it to work well enough with some design changes but I still need to pass the hex value through the form to update with the rest of the info on the page.