Posting RGB and opacity style to database from input form

Hi

I have a color picker called Farbtastic that gives me a hex value and RGB with opacity as the style of the input field.

This is what it looks like on the website.
<input type="text" name="background-color" id="background-color" value="#000000" class="box-color float-right" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); opacity: 0.45;">

and

<script>
$(function()
{
$('.picker.color').each(function(index, element)
{
$('#' + element.id).farbtastic('#' + element.id.replace('-picker', '-color'));
});
$('.picker.background').each(function(index, element)
{
$('#' + element.id).farbtastic('#' + element.id.replace('-picker', '-background'));
});


$("#background-transparency-slider").slider({value: "45", min: 0, max: 1, step: 0.05, slide: function(event, ui) {
$("#background-color").css("opacity", ui.value);
$("#background-transparency").val(ui.value); }});
$("#background-color").css("opacity", "1");
});
</script>

I need to understand how to write this to the database.
Right now I am able to post only the hex value which is: #000000

What I would like to post is the RGB and opacity style which is:
background-color: rgb(0, 0, 0); opacity: 0.45;

the hex value will be stored separately in the database #000000

What it will look like in the database is this (not the hex value)
rgb(0, 0, 0, 0.45);

background-color: rgb(0, 0, 0); opacity: 0.45; IS EQUAL TO --> rgb(0, 0, 0, 0.45);  

Let me know if you have any questions.

Thank you in advance for your help.
U_S_AAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Confused
Where are you getting rgb(0, 0, 0, 0.45); from?
0
Ray PaseurCommented:
This statement, if sent in a standard HTTP request will give you a key = "background-color" and a value = "#000000" in the $_POST or $_GET array.

<input type="text" name="background-color" id="background-color" value="#000000" ...

It may be possible to get more of this information into the action script with a combination of jQuery and AJAX, but I don't have enough to go on here yet.  Please post the SSCCE example script using the code snippet, and I'll be glad to see what we can get to work.
0
U_S_AAuthor Commented:
I need to get the background-color rgb element and opacity element from style in the input field which is rgb(0, 0, 0);  and opacity: 0.45

I need the end result to look like this
rgb(0, 0, 0, 0.45);

I want to be able to submit the rgb and opacity code to the database for later retrieval

This is my color wheel
http://screencast.com/t/ceM1GgiQquFH

This is my source code

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 <script type="text/javascript" src="/farbtastic/farbtastic.js"></script>
 <link rel="stylesheet" href="/farbtastic/jquery-ui-1.8.14.custom.css" type="text/css" />
  <link rel="stylesheet" href="/farbtastic/farbtastic.css" type="text/css" />

<script>
$(function()
{
$('.picker.color').each(function(index, element)
{
$('#' + element.id).farbtastic('#' + element.id.replace('-picker', '-color'));
});
$('.picker.background').each(function(index, element)
{
$('#' + element.id).farbtastic('#' + element.id.replace('-picker', '-background'));
});


$("#background-transparency-slider").slider({value: "1", min: 0, max: 1, step: 0.05, slide: function(event, ui) {
$("#background-color").css("opacity", ui.value);
$("#background-transparency").val(ui.value); }});
$("#background-color").css("opacity", "1");

$("#left-transparency-slider").slider({value: "1", min: 0, max: 1, step: 0.05, slide: function(event, ui) {
$("#left-background").css("opacity", ui.value);
$("#left-transparency").val(ui.value); }});
$("#left-background").css("opacity", "1");
});
</script>

      <h3>Profile Background</h3>

                  
                  
            <div class="grid-customize">
<div>
<div id="background-picker" class="picker color"></div>
</div>
<div>
<input type="text" name="background-color" id="background-color" value="#000000" class="box-color float-right" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); opacity: 0.45;">                  </div>
</div>
<div id="background-transparency-slider" class="slider"></div>
<input type="hidden" name="background-transparency" id="background-transparency" value="1" /> 

Open in new window

(Edited to remove the code from the inline text and use the code snippet. ~Ray)
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

GaryCommented:
So something like this, but I don't know where you want to put the value
http://jsfiddle.net/GaryC123/zyfnW/

bg = $("#background-color").css("background-color")
op = $("#background-color").css("opacity")
output = bg.replace(")", ", "+op+")");
alert(output)

Open in new window

0
Ray PaseurCommented:
Am I understanding you correctly if I say that you want to use this:

http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

And you want to compute the opacity relative to all white #FFFFFF?
0
U_S_AAuthor Commented:
@GaryC123

I'm not getting .45, I'm getting this  (using your code)
http://screencast.com/t/Xi3N5L5Ck

It has to be .45 or whatever the opacity number is, when the user changes their color/opacity.  The number 0.45 changes by the user adjusting their opacity selection.

0.5 comes out as .5
http://screencast.com/t/W9cC3pws

0.45 does not come out as .45
http://screencast.com/t/X50fa4PyDH


Also, I'm not sure what to do with what you are illustrating.  Here is my post code

How should I post the output?

   if($_SERVER['REQUEST_METHOD'] == "POST")
{

$background = mysql_real_escape_string(htmlspecialchars($_POST['background-color']));
$leftcolumn = mysql_real_escape_string(htmlspecialchars($_POST['left-background']));

$user_basic = mysql_query("UPDATE user_basic SET background='$background' WHERE member_id='$uid'");
}
0
GaryCommented:
Can fix the decimal length easily with toFixed(2)
output = bg.replace(")", ", "+Math.round(op*100)/100+")");
How much precision do you need? Like 0.499 would be rounded to 0.5

Are you also saying you want to remove the leading zero so it is .45 and not 0.45?

There is nothing in your code to suggest what you want to do with it.
Do you want to post it in an ajax request or post it in a normal page submit?
0
U_S_AAuthor Commented:
0.45 is correct
and
normal page submit
0
GaryCommented:
So you will need another input in the form, since you want to keep the hex value.
Then you can use
$("#new-input-id").val(output)

Or is background-transparency the input you want to put the value in?
$("#background-transparency").val(output)

And then just call its post name on the receiving page.

So all together assuming background-transparency
bg = $("#background-color").css("background-color")
op = $("#background-color").css("opacity")
output = bg.replace(")", ", "+Math.round(op*100)/100+")");
$("#background-transparency").val(output)

Open in new window


I have to go now, but I'm not sure how/when you want to execute the above code - on change of the colour wheel, on submit...?
0
U_S_AAuthor Commented:
How would i implement your code into my form?

This is what I am currently using as a form

		<form method="post" action="">

	<div class="grid-customize">
<div>
<div id="background-picker" class="picker color"></div>
</div>
<div>
<input type="text" name="background-color" id="background-color" value="#000000" class="box-color float-right" />				</div>
</div>
<div id="background-transparency-slider" class="slider"></div>
<input type="hidden" name="background-transparency" id="background-transparency" value="1" />


<input type="submit"  value="Save Changes" class="button"/>

</form>

Open in new window


and then the post statement

  if($_SERVER['REQUEST_METHOD'] == "POST")
{

$background = mysql_real_escape_string(htmlspecialchars($_POST['background-color']));

$user_basic = mysql_query("UPDATE user_basic SET background='$background' WHERE member_id='$uid'");
}

Open in new window

0
GaryCommented:
@U_S_A
As I said, too late for me now, will get back to this tomorrow
0
U_S_AAuthor Commented:
@Gary

Understood - Thank you. :-)
0
GaryCommented:
Add another input to your form we'll call it background-opacity
<input type="hidden" name="background-opacity" id="background-opacity">

In your jquery $(function(){} add
$("form").submit(function(){
	bg = $("#background-color").css("background-color")
	op = $("#background-color").css("opacity")
	output = bg.replace(")", ", "+Math.round(op*100)/100+")");
	$("#background-opacity").val(output) 
})

Open in new window


On the receiving page you then just get the value with $_POST['background-opacity']
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
U_S_AAuthor Commented:
Gary was very helpful at finding a solution and helped me implement the new code into my existing form.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.