JScolor to PHP Variable

[cjenkins08]

I am working with this color picker code from jscolor.com and I am trying to use this particular example

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
function updateInfo(color) {
    document.getElementById('info-r').value = color.rgb[0];
    document.getElementById('info-g').value = color.rgb[1];
    document.getElementById('info-b').value = color.rgb[2];
}
</script>

Color: <input class="color {onImmediateChange:'updateInfo(this);'}" value="66ff00">
R: <input id="info-r" size="2" />,
G: <input id="info-g" size="2" />,
B: <input id="info-b" size="2" />

After a submit button is clicked I need to assign variables to each of the RGB in PHP, but I'm not quite sure how to take those javascript values over to PHP.

Any help is appreciated.

[ginerjm]

If those values that you set with the js code are in the form that is being submitted, then they are part of your POST array.  What's the problem with that?

[cjenkins08]

I am trying as you said and pulling them with $post using the following code in my php file

$colorr = $_POST['color'][0];
$colorg = $_POST['color'][1];
$colorb = $_POST['color'][2];

The form is the same as original post except I added the name property to the input field

<form action="100-text-no-color.php" name="genForm" method="post">

Color: <input name="color" class="color{onImmediateChange:'updateInfo(this);'}" value="66ff00">
R: <input id="info-r" size="2" />,
G: <input id="info-g" size="2" />,
B: <input id="info-b" size="2" />

<input type="submit" value="Generate Grid" style="height: 40px; width: 180px; font-size: 17px;" />

</form>

When I go to display the variables, I am getting the first 3 digits of the HEX code as opposed to the RGB values. What am I doing wrong?

Thanks

[Jacques1]

I think you're just confused because of all the fancy JavaScript.

 

You have four input elements, right? The first one holds the hexadecimal value of the color. That's also the one you've called “color”, so the “color” parameter will contain a string with 6 hexedecimal digits. Not exactly surprising.

 

You want to use the other input fields? Well, then give those a name. Call them “r”, “g”, “b”. Or call them “color[0]”, “color[1]” and “color[2]” to make the “color” parameter an array.

[cjenkins08]

Oh yeah, I'm confused alright. I'm still new, but I'm trying.

Your post made sense to me and I made some progess, but have one more stumbling block.

I have this html

Color: <input name="color" class="color{onImmediateChange:'updateInfo(this);'}" value="66ff00">
R: <input id="info-r" name="colorr" size="2" />,
G: <input id="info-g" name="colorg" size="2" />,
B: <input id="info-b" name="colorb" size="2" />

and this in my php file

$colorr = $_POST["colorr"];
$colorg = $_POST["colorg"];
$colorb = $_POST["colorb"];

So this is now working to pull the value of the RGB fields, the problem is when jscolor sets these values it seems unless it is a 0 or 1 they put a decimal in front of the number and some are longer than 3 digits.

Example

R 0.08999999999999997

G 1

B 0.286

 

So when I go to display these colors they are not recognized.

How can I strip the decimal and the number in front of the decimal and also strip any digits past the decimal that are more than 3 places out

 

Thanks for the help

[Jacques1]

The values range from 0 to 1. If you want a scale from 0 to 255, you need to multiply the value with 255 and round the result.

[cjenkins08]

Jackpot!

Thanks you very much