I have this Star Rating system right. When you click on a star it should pass a value into the function. Then using AJAX it posts it to an external PHP file. The only problem is that when it gets to the PHP file it comes as null or no value.
I will try to echo the $_POST['vote'] variable in an alert box using AJAX and it is blank so it doesn't come back as "NULL" or "0" it's just nothing. I'm not sure where I'm losing the value because I can track it all the way to the send() function. Anyone see a problem?
HTML:
<style type="text/css">
#container{margin: 10px auto;width: 500px;height: 300px;background-color: gray;}
#starContainer{padding-top:20px;margin:0 auto;width:150px;}
.box{height:28px;width:30px;float:left;position:relative;z-index:5;cursor:pointer;}
.star{background-image:url('emptyStar.png');background-repeat:no-repeat;}
.starHover{background-image:url('goldStar.png');background-repeat:no-repeat;}
#voteBar{float:left;height:28px;background-color:#dbd923;position:relative;top:-28px;z-index:1;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('starHover');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('starHover');
}
);
});
function Cast(vote)
{
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
alert(xmlhttp.responseText);
var json = JSON.parse(xmlhttp.responseText);
}
}
xmlhttp.open("POST", "process.php", true);
xmlhttp.send('vote=' + vote);
}
</script>
</head>
<body>
<div id="container">
<center>
<div id="starContainer">
<div class="box star" onclick="Cast(1)"></div>
<div class="box star" onclick="Cast(2)"></div>
<div class="box star" onclick="Cast(3)"></div>
<div class="box star" onclick="Cast(4)"></div>
<div class="box star" onclick="Cast(5)"></div>
<div id="voteBar"></div>
</div>
</center>
</div>
</body>
</html>
PHP:
<?php
$vote = $_POST['vote'];
$totalVoteValue = 0;
$amtVotes = 1;
$width = (($totalVoteValue + (($vote - $totalVoteValue) / $amtVotes)) / 5) * 150;
echo $width;
?>
