Javascript to PHP variable any advice appreciated

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

Javascript to PHP variable any advice appreciated

Post by scarface222 »

Hey guys I have a simple javascript color-picker that allows the user to choose a color and preview it, however I want to extract the color variable in hexadecimal format into a php variable so I can store it into a database when the user clicks a button. If anyone is good with java and php I would appreciate any advice or feedback. The section of interest is highlighted. Thanks in advance.

Code: Select all

<!--color picker function-->
<script type="text/javascript">
    function hexFromRGB (r, g, b) {
        var hex = [
            r.toString(16),
            g.toString(16),
            b.toString(16)
        ];
        $.each(hex, function (nr, val) {
            if (val.length == 1) {
                hex[nr] = '0' + val;
            }
        });
        return hex.join('').toUpperCase();
    }
    function refreshSwatch() {
        var red = $("#red").slider("value")
            ,green = $("#green").slider("value")
            ,blue = $("#blue").slider("value")
            ,hex = hexFromRGB(red, green, blue);
        $("#swatch").css[color=#FF0000]("background-color", "#" + hex);[/color]
    }
    $(function() {
        $("#red, #green, #blue").slider({
            orientation: 'horizontal',
            range: "min",
            max: 255,
            value: 127,
            slide: refreshSwatch,
            change: refreshSwatch
        });
        $("#red").slider("value", 255);
        $("#green").slider("value", 140);
        $("#blue").slider("value", 60);
    });
    </script>
Last edited by scarface222 on Thu Apr 09, 2009 9:56 pm, edited 1 time in total.
User avatar
Apollo
Forum Regular
Posts: 794
Joined: Wed Apr 30, 2008 2:34 am

Re: Javascript to PHP variable any advice appreciated

Post by Apollo »

PHP runs serverside, JS runs clientside. So normally this ain't possible, but with some ajax you can work around it (if you're not familiar with ajax: basically it's doing http requests from javascript).
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

Re: Javascript to PHP variable any advice appreciated

Post by scarface222 »

Alright thanks man I'll look into it. Appreciate the feedback. If anyone is an ajax expert and has any ideas for possible ajax scripts in the mean time I would greatly appreciate it. Thanks again.
andrei.mita
Forum Commoner
Posts: 65
Joined: Sun May 08, 2005 4:06 am
Location: Barlad/Romania

Re: Javascript to PHP variable any advice appreciated

Post by andrei.mita »

You don't really need ajax, I think. Make a small form with an hidden or text input and update the value of this input from your javascript code. Add to this input a submit button and you are set :)

I am having a hard time understanding your script because my js skills are 0. But, to update the value of your input you need to use this: document.getElementById("selected_color").value = your_function_or_whatever_returns_the_new_color;
Now that you have your color you can submit the form and run the php file to store the color.

You should get something like this:

Code: Select all

 
<!--color picker function-->
<script type="text/javascript">
...
document.getElementById("selected_color").value =  your_function_or_whatever_returns_the_new_color;
...
</script>
 
<form method="POST" action="save_color.php">
<input type="text" id="selected_color"><input type="submit" value="Save my color!"> 
</form>
 
If you don't want to leave the page then you'll need ajax. If that is the case for you then tell me and I'll post the ajax solution also.
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

Re: Javascript to PHP variable any advice appreciated

Post by scarface222 »

Thanks alot man I'll try it out, but since you seem like you are fluent in ajax can you post that solution as well, and can you also tell me why ajax is beneficial? I mean doesn't it only prevent the whole page from loading and makes certain elements load? Why is it so useful? And do you know of any resources that explain ajax for beginners, it seems complicated and I am not sure how to integrate what script where. Thanks again for your help. Really appreciate it.
andrei.mita
Forum Commoner
Posts: 65
Joined: Sun May 08, 2005 4:06 am
Location: Barlad/Romania

Re: Javascript to PHP variable any advice appreciated

Post by andrei.mita »

Not so fluent with ajax, just playing with it for a couple of months. You could start here http://w3schools.com/php/php_ajax_intro.asp which will also provide examples for your question.

Depending on what you need, preventing the page to reload could proof vital :) Or running n scripts simultaneously and out the result virtually anywhere also proves to be extremely useful.
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

Re: Javascript to PHP variable any advice appreciated

Post by scarface222 »

ok i figured it out down to one little problem. The selected_color id (set in javascript) displays in the div but does not work in the form. It just uploads a blank entry to my database. I know the php script is right because if i set a value of the input color_pick it uploads to my database. Anymore ideas man?


code

Code: Select all

<div id="selected_color"></div>
 
<form method="POST" action="">
<input type="hidden" id="selected_color" name="color_pick"><input type="submit" name="color" value="Save my color!">
</form>
<?php
 
if (isset($_POST['color']))
{
    $color=mysql_real_escape_string($_POST["color_pick"]);
$second_query = "UPDATE users SET custombackground='$color'
WHERE username='$username'";
mysql_query($second_query) or die('Error, insert query failed');
}
?>
andrei.mita
Forum Commoner
Posts: 65
Joined: Sun May 08, 2005 4:06 am
Location: Barlad/Romania

Re: Javascript to PHP variable any advice appreciated

Post by andrei.mita »

Both the div and the hidden input have the same id, that's not good. Change the id for one of them. Then, how do you set the value for the input? I believe you should use document.getElementByID('hidden_input_div').value = .......;
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

Re: Javascript to PHP variable any advice appreciated

Post by scarface222 »

MY man, lol. I used the javascript below, but then I changed innerHTML to value and it worked. Thanks alot bro. By the way I hate to keep asking you questions but I really have noone else to ask and this problem had been bugging me for a couple weeks now. I am trying to make it so when a form is used, the page does not reload, only the form loads. Someone recommended a Jquery post function (http://docs.jquery.com/Ajax/jQuery.post) which they said was easier than learning ajax, but I have no idea how to implement it in a image upload form for example. I read the manual and description and I don't know how I would incorporate it. If you have any ideas on that, you'd be my hero haha. Thanks again for your help on the colorpicker.

Code: Select all

document.getElementById('selected_color').innerHTML ="#"+hex.join('').toUpperCase();
andrei.mita
Forum Commoner
Posts: 65
Joined: Sun May 08, 2005 4:06 am
Location: Barlad/Romania

Re: Javascript to PHP variable any advice appreciated

Post by andrei.mita »

Never used jQuery. Checked it some time ago, didn't find it useful for my projects. But, I know for sure that jQuery is a great tool so you might want to learn it.
I have uploaded an ajax example. You can see how it works here: http://www.imediasoftware.net/ajax/ and download it here: http://www.imediasoftware.net/ajax/ajax.zip Just ask if you don't understand :)
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

Re: Javascript to PHP variable any advice appreciated

Post by scarface222 »

Hey thanks man I'll mess with it and see if I can figure it out. I just got a good book to help teach me ajax. I will get back to you in a couple days to let you know if I figured out the image upload form after I look at the example and read the book.
Post Reply