Set background-image with css jquery

Question

I create a script that edit background-image, color, size and position of a specific div. On document ready script searching for specific div and loads settings

var color_default = $('.banneruser').css("background-color");
var image_default = $('.banneruser').css("background-image");
var align_default = $('.banneruser').css("background-position");
var size_default = $('.banneruser').css("background-size");

With a simple panel i edit all settings separately and on save button i do an ajax call that set into a database all my settings

function don() {

            var color_set   = $('.banneruser').css("background-color");
        var align_set   = $('.banneruser').css("background-position");
        var size_set    = $('.banneruser').css("background-size");
        var image_set   = $('.banneruser').css("background-image");


        $.ajax({ 
            type: "GET",  
            url:  "set.php", 
            data: "color=" + color_set + "&align=" + align_set + "&size=" + size_set + "&image=" + image_set,
            success: function(response){
                alert(response);
            }
        });
        return false;
}

And set.php save into database

<? include 'config.php'; connect(); session_start();

    $color=mysql_real_escape_string($_GET['color']);
    $image=mysql_real_escape_string($_GET['image']);
    $align=mysql_real_escape_string($_GET['align']);
    $size=mysql_real_escape_string($_GET['size']);

    //data
    $query = "SELECT * FROM utenti WHERE username='".$_SESSION['user']."'"; 
    $result = mysql_query($query);
    $id = mysql_result($result,0,"id");

    $banner = "background-color:".$color."; background-image:".$image."; background-position:".$align."; background-size:".$size."; ";

    $done= mysql_query("UPDATE `utenti` SET `banner` = '$banner'  WHERE `id` = '$id';");

    if($done){ echo '<i class="icon-ok-sign"></i>'; } else { echo '<i class="icon-warning-sign"></i>'; }

?>

Basically, this work perfecly on chrome but firefox and IE set into a database a strange string like this

 background-color:rgb(219, 126, 50); background-image:url(" http:="" posth.it="" account="" felicegg="" banner.jpg");="" background-position:50%;="" background-size:auto;="" "="

even though I read it perfectly in my database as

background-color:rgb(219, 126, 50); background-image:url("http://posth.it/account/felicegg/banner.jpg"); background-position:50%; background-size:auto; 

PS: if i set the settings on chrome, ie and firefox perfectly read the string, even if it happens that problem(also on chrome).

The question is WHY? :D Any ideas ?

Answer 1

You should escape your data:

function don() {

        var color_set   = $('.banneruser').css("background-color");
        var align_set   = $('.banneruser').css("background-position");
        var size_set    = $('.banneruser').css("background-size");
        var image_set   = $('.banneruser').css("background-image");

        $.ajax({ 
            type: "GET",  
            url:  "set.php", 
            data: "color=" + encodeURI(color_set) + "&align=" + encodeURI(align_set) + "&size=" + encodeURI(size_set) + "&image=" + encodeURI(image_set),
            success: function(response){
                alert(response);
            }
        });
        return false;
}