SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2004
    Location
    Boston
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript getElementByID() to form value

    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.
    HTML Code:
    <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:
    HTML Code:
    <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

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code Javascript:
    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.
    HTML Code:
    <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.

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2004
    Location
    Boston
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    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.

    Code Javascript:
    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.
    HTML Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •