Javascript doesnt contact php page

im quite new to php and javascript but still trying to get my webpage to work. Im trying to add a 5-star-voting-system to the page which will contact my database and update accordingly. As you might have noticed my code grammar isnt perfect either.

<div class="first"  onmouseover="starmove('-32px')" onmouseout="starnormal()" onclick="rate('harrys','1')">

this is the div that "contacts" the javascript

function rate(id,ratings){
var i=id;
var r=ratings;
var xmlhttp;
if (window.XMLHttpRequest)
  { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
else
   { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   }
 xmlhttp.onreadystatechange=function()
   {
xmlhttp.open("POST","http://------/rating.php?id="+i+"&rating="+r,true);
xmlhttp.send();
   }

this is the javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Namnlös 1</title>
</head>
<body>
<?php
mysql_connect("host", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());
mysql_set_charset('utf8');
$itemid = ($_GET["id"]);
$rating = ($_GET["rating"]);
$query = "INSERT INTO ratings(id,rating) VALUES ('$itemid','$rating')";
mysql_query($query);
?>
</body>
</html>

this is my rating.php file (note: the values in mysql_connect is right on actual page, even if not defined here.)

if I just open my php file there will be a row added to mysql so i know its connected properly.

Solution

You are passing the values to rating.php as GET but you are fetching it as POST

xmlhttp.open("POST","http://------/rating.php?id="+i+"&rating="+r,true);

Here, even if you give the method as POST, ?id="+i+"&rating="+r means that id and rating is being passed as GET.

So you cannot access them as

$itemid = ($_POST["id"]);
$rating = ($_POST["rating"]);

You will need to change that to:

$itemid = ($_GET["id"]);
$rating = ($_GET["rating"]);

Also change your query to:

$query = "INSERT INTO ratings(id,rating) VALUES ('".$itemid."','".$rating."')";

EDIT:

I have updated the Javascript code here. Try this:

<script>
function rate(id,ratings)
{
    var i=id;
    var r=ratings;
    var xmlhttp;
    if (window.XMLHttpRequest)
    { 
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST","http://------/rating.php?id="+i+"&rating="+r,true);
    xmlhttp.send();
}
</script>

Changes: 1. There were two braces after:

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   }

The second brace effectively closed the rate() function, so the code after that wasnt doing what it was expected to. So I moved that brace to the end of the code, to wrap the function.

The onreadystatechange function is called AFTER data has been sent to the server in order to track, what is going on with the request. In your code, you were sending the request INSIDE the onreadystatechange, which would never execute, since the request would never get sent..

I changed

  xmlhttp.onreadystatechange=function()
       {
         xmlhttp.open("POST","http://------/rating.php?id="+i+"&rating="+r,true);
         xmlhttp.send();
       }

into a simple POST call:

 xmlhttp.open("POST","http://------/rating.php?id="+i+"&rating="+r,true);
 xmlhttp.send();

I hope this explains everything :)