Page 1 of 1

Javascript to PHP variable any advice appreciated

Posted: Thu Apr 09, 2009 7:05 pm
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>

Re: Javascript to PHP variable any advice appreciated

Posted: Thu Apr 09, 2009 7:16 pm
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).

Re: Javascript to PHP variable any advice appreciated

Posted: Thu Apr 09, 2009 8:36 pm
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.

Re: Javascript to PHP variable any advice appreciated

Posted: Fri Apr 10, 2009 1:03 am
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.

Re: Javascript to PHP variable any advice appreciated

Posted: Fri Apr 10, 2009 11:30 am
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.

Re: Javascript to PHP variable any advice appreciated

Posted: Fri Apr 10, 2009 1:02 pm
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.

Re: Javascript to PHP variable any advice appreciated

Posted: Mon Apr 13, 2009 8:37 pm
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');
}
?>

Re: Javascript to PHP variable any advice appreciated

Posted: Tue Apr 14, 2009 12:51 am
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 = .......;

Re: Javascript to PHP variable any advice appreciated

Posted: Tue Apr 14, 2009 12:24 pm
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();

Re: Javascript to PHP variable any advice appreciated

Posted: Wed Apr 15, 2009 1:21 am
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 :)

Re: Javascript to PHP variable any advice appreciated

Posted: Wed Apr 15, 2009 12:00 pm
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.