Bringing data from html to php and posting it onto database - php

Question

<img id="image" src="jj.png" onclick="randomizeImage();"/>
<h2 id="Score" name="Score1">0</h2>
<script>
var counter=0;
function randomizeImage() {
counter++;
var test= document.getElementById('Score');
test.innerHTML= counter;
}
</script>
<?php
$con = mysql_connect("localhost","root");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("database", $con);
$user_Name = $_COOKIE["username"]; //i stored the username as a cookie and retrieved it here
echo $user_Name; //echo it so i can check if it is right
$New= $_POST["Score"]; //**this is the part which is undefined**
$sql = "UPDATE User SET Score = '$New' WHERE ID='$user_Name'";
if (!mysql_query($sql,$con))
{
die('Error please try again ' . mysql_error());
}
mysql_close($con)
?>
I have an image that whenever i click on it, it will call a function which will increase a counter by 1. This score will be reflected on the html side and increase whenever i click on the image. However now i want to bring this counter data into php where i can upload it onto a database where it matches the user's username which he/she entered in a previous phpfile. I cant bring the value of score over? It keeps saying undefined index.
I have two colums called ID and Score. ID is where i score the user's username and Score is the score from the counter. I want the Score to updated everytime the image is pressed with respect to the username.
Database name is :database
Table name is: User
Is there anyway to do this without AJAX?

Answer 1

You need to hook an ajax request to the randomizeImage() function. With the AJAX request, you can make a post request to the PHP page which you have created so it would save the score.
See AJAX
function randomizeImage() {
counter++;
var test= document.getElementById('Score');
test.innerHTML= counter;
$.post("yourphpfile.php", {score: counter}, function(result) {
//should be saved
}
}
This is the JS side. PHP side - you have to check if there is a POST request with the variable score.
<?php
if (isset($_POST['score'])) {
$score = intval($_POST['score']);
//check if user already has score.
$scoreQuery = "SELECT score FROM tbl WHERE username = '$username'";
//run the query, if user has score:
$query = "";
if (user has score already) {
$query = "UPDATE tbl SET score = score + $score WHERE username = '$username'";
} else {
$query = "INSERT INTO tbl (score, username) VALUES ($score, '$username');
}
//run the query
}

Answer 2

This is how you can send an ajax request to the server. Make sure to include jquery first.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var counter=0;
function randomizeImage() {
counter++;
var test= document.getElementById('Score');
test.innerHTML= counter;
$.ajax
(
"ajax.php",
{
method: "POST",
data: { score: counter}
}
);
}
</script>
Next you have to put your PHP code into a separate file, I call it "ajax.php".
<?php
$score = filter_input(INPUT_POST, "score");
if (isset($score) && $score != "") {
$con = mysql_connect("localhost","root");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("database", $con);
$user_Name = $_COOKIE["username"]; //i stored the username as a cookie and retrieved it here
echo $user_Name; //echo it so i can check if it is right
$sql = "UPDATE User SET Score = '$score' WHERE ID='$user_Name'";
$result =mysql_query($sql) or die("could not update" . mysql_error);
if (!mysql_query($sql,$con))
{
die('Error please try again ' . mysql_error());
}
mysql_close($con)
}
?>