So i'm trying to make a drawing application in html/javascript, where i want to save the files to mysql/phpmyadmin. My problem is connecting to the database i set up.

What's happening is that the user draws on the canvas, clicks on a save button and i send the lines (saved in an array) and the user name from my javascript file to a php file which sends the information to the database. I've tried looking online for a solution but i can't seem to find anything that helps me. It's probably right in front of me, but i've never tried writing in javascript and php.

Just to be sure there's no confusion: I can't seem to figure out how to send the data from my javascript file to my php file and update the database

Here's what i got so far:

Html:

<button id="saveimage" onclick="saveImage()">Save image</button>

Javascript:

function saveImage()
{
    var position = JSON.stringify(allMousePos);
    author = prompt("Please type your name");

    $.ajax({
        type: 'post',
        url: 'https://localhost/folder/database.php',
        data: {author: author, position: position},
        success: function( data ) {
        console.log( data );
        }
    });
}

Php:

$dbhost = 'localhost';
$dbuser = 'User';
$dbpass = 'pass';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if (!$conn)
{
    die('Could not connect: ' . mysql_error());
}

if (!get_magic_quotes_gpc())
{
    $author = addslashes($_POST['author']);
    $mousepositions = addslashes($_POST['position']);
} else
{
    $author = $_POST['name'];
    $mousepositions = $_POST['position'];
}

var_dump($author);

$sql = "INSERT INTO Images (Author, Image) VALUES ('$author', '$mousepositions')";

mysql_select_db('db_to_use');
$retval = mysql_query($sql, $conn);

if (!$retval)
{
    die('Could not enter data: ' . mysql_error());
}

echo "Entered data successfully\n";
mysql_close($conn);

I'm not getting any output from the console in chrome or firefox when running this, and nothing in the database

I don't know if you need any more info, but let me know if you do. The database only has 3 fields, an id which auto increments, and then author and the positions.

So i'm trying to make a drawing application in html/javascript, where i want to save the files to mysql/phpmyadmin. My problem is connecting to the database i set up.

What's happening is that the user draws on the canvas, clicks on a save button and i send the lines (saved in an array) and the user name from my javascript file to a php file which sends the information to the database. I've tried looking online for a solution but i can't seem to find anything that helps me. It's probably right in front of me, but i've never tried writing in javascript and php.

Just to be sure there's no confusion: I can't seem to figure out how to send the data from my javascript file to my php file and update the database

Here's what i got so far:

Html:

<button id="saveimage" onclick="saveImage()">Save image</button>

Javascript:

function saveImage()
{
    var position = JSON.stringify(allMousePos);
    author = prompt("Please type your name");

    $.ajax({
        type: 'post',
        url: 'https://localhost/folder/database.php',
        data: {author: author, position: position},
        success: function( data ) {
        console.log( data );
        }
    });
}

Php:

$dbhost = 'localhost';
$dbuser = 'User';
$dbpass = 'pass';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if (!$conn)
{
    die('Could not connect: ' . mysql_error());
}

if (!get_magic_quotes_gpc())
{
    $author = addslashes($_POST['author']);
    $mousepositions = addslashes($_POST['position']);
} else
{
    $author = $_POST['name'];
    $mousepositions = $_POST['position'];
}

var_dump($author);

$sql = "INSERT INTO Images (Author, Image) VALUES ('$author', '$mousepositions')";

mysql_select_db('db_to_use');
$retval = mysql_query($sql, $conn);

if (!$retval)
{
    die('Could not enter data: ' . mysql_error());
}

echo "Entered data successfully\n";
mysql_close($conn);

I'm not getting any output from the console in chrome or firefox when running this, and nothing in the database

I don't know if you need any more info, but let me know if you do. The database only has 3 fields, an id which auto increments, and then author and the positions.

• javascript
• php
• phpmyadmin

• Why don't you debug in IDE? Did you check the logs? Also, print some message in between lines and see if those are displaying. You will know where it is erring out. – Kevin Rave Commented Sep 17, 2014 at 16:29
• You have an event handler nested in a function. Remove this line: $("#saveimage").on( 'click', function () { and the corresponding braces. The click handler is not needed as your function is already triggered by the elements onclick attribute – Steve Commented Sep 17, 2014 at 16:31
• did you check response in firebug ? Firefox says "POST localhost/folder/database.php [0ms]" just expand this and click on response tab. – Aksh Commented Sep 17, 2014 at 17:18
• 1 I don't know where you learned to code like this, but please, STOP. This is based on dangerously out of date practices and is full of cargo-cult code that serves no purpose, plus is dangerously insecure as addslashes is not the right way to do this. mysql_query is an obsolete interface and should not be used in new applications and will be removed in future versions of PHP. PDO is not hard to learn. A guide like PHP The Right Way explains best practices. – tadman Commented Sep 17, 2014 at 17:20
• I'm not sure where to find the response in firebug? If i click on the line "POST localhost/folder/database.php [0ms]" a new window is opened, but not sure what to look for here..? – AggaMax Commented Sep 17, 2014 at 17:36

2 Answers 2

As per my ment, you have an unnecessary nested click handler within your function, so remove that. Also you are attempting to make a secure connection, but (probably) dont have ssl installed on your machine, so you need to make a regular connection (http not https):

function saveImage()
{
    var position = JSON.stringify(allMousePos);
    author = prompt("Please type your name");

    $.ajax({
        type: 'post',
        url: 'http://localhost/folder/database.php', //<--Note http
        data: {author: author, position: position},
        success: function( data ) {
        console.log( data );
        }
    });
}

Don't forget to decode your datas (previously encoded by JSON.stringify).

Try to add a json_decode() and display all your vars with a var_dump() before trying to deal with your database.

Hope it helps.