Bringing data from html to php and posting it onto database

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?

Janno · Answer 1 · 2016-07-28T11:06:21.947

0

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
}

edited Jul 28 '16 at 11:06

answered Jul 28 '16 at 10:59

Janno

542
4
15

is it possible to show me a small example? im new to AJAX and unsure about what it does thanks! – Jerru Jul 28 '16 at 11:01
Added the example of both the PHP code and also the AJAX POST code. My example is based on jQuery. – Janno Jul 28 '16 at 11:06
Answer to your question that what AJAX does - it makes an asynchronous call to a page you wish. It's the same as if you would have a form where you press submit, it refreshes the page etc, only with AJAX, it doesn't refresh the page. You can stay on the same page while the data still gets saved. AJAX is kind-of an multitool, you can use it for retrieving data, for saving data etc etc. It'll come in handy, I advise you to check out the link I added to my post. :) – Janno Jul 28 '16 at 11:13
It helped me understand abit more about ajax but after implementing it into my codes it still doesnt seem to work. im using mysql by the way:) – Jerru Jul 28 '16 at 13:27
Share the portions of your code, the AJAX part and also the PHP part. – Janno Jul 29 '16 at 05:17
1

i solved it with the other user's help! thanks anyway :)) you helped me understand ajax! – Jerru Jul 31 '16 at 15:07

Black · Accepted Answer · 2016-07-28T11:18:47.887

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)
  }
 ?>

I wonder why my answer was downvoted even though it is a working solution which is even accepted. Very nice... — Black, Aug 01 '16 at 06:13

Bringing data from html to php and posting it onto database

2 Answers2

Linked