'Connecting to database on phpmyadmin using javascript and php

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.

javascriptphpphpmyadmin


Solution 1:[1]

As per my comment, 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 );
        }
    });
}

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steve
Solution 2 Hassaan

Related Questions