Simple voting system

[gilgimech]

Hi all,

I'm trying to make a simple voting system for images. The user uploads an image then all the images are displayed and people can vote on it.

I got the image upload and display part working, but I can't get the voting system to work.

I found this tutorial here http://www.designscripting.com/2012/05/php-online-voting-system-using-jquery-ajax/, but I can't get it to work with multiple images on the page.

All votes go to the first image.

The JS on the tutrial has this


$(document).ready(function()
{
$(".submitVote a").click(function()
{
var ID = <?php echo $id;?>//$("#vote").text();
var rating = <?php echo $ratings;?>

var queryString = 'id='+ ID +'&vote='+rating;
$("#vote").text(rating+1);

$.ajax({
type: "POST",
url: "submitVote.php",
data: queryString,
cache: false,
success: function(html)
{

$(".submitVote").html('<p style="margin:1px;padding:0px;">Submit your vote</p>');
$("#greet").html("Thanks for voting!");
$("#greet").delay(500).fadeOut(2000);

}
});

});

});

I tired changing the ID var to

var ID = $(this).attr("id"); and gave the images a dynamic id, but that really messed things up. It's started adding multiple votes to the database.

I'm not sure if it's a JavaScript or a PHP issue, but I think it's JavaScript.

Here's my full code

index.php


<?php
include('db-connect.php');
$sql = "SELECT * FROM entries";
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_array( $result );
$id = $row['id'];
$ratings = $row["rating"];
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".submitVote a").click(function(){
var ID = $(this).attr("id");
var rating = <?php echo $ratings;?>;

var queryString = 'id='+ ID +'&vote='+rating;
$("#vote").text(rating+1);

$.ajax({
type: "POST",
url: "submitVote.php",
data: queryString,
cache: false,
success: function(html){

$(".submitVote").html('<p style="margin:1px;padding:0px;">Submit your vote</p>');
$("#greet").html("Thanks for voting!");
$("#greet").delay(500).fadeOut(2000);

}
});

});

});
</script>


display-entries.php


include('db-connect.php');
$result = mysql_query("SELECT * FROM entries") or die(mysql_error());
echo '<table class="entry-table"><tr>';
$count = 0;
while ($row = mysql_fetch_array( $result )){
$entry_name = $row['entry_name'];
$entry_submition = $row['entry_filename'];
$entry_description = $row['entry_description'];
$entry_pic = '<div class="display-img"><a href="../photos/'.$row['entry_filename'].'" rel="prettyPhoto"><img src="../photos/'.$row['entry_filename'].'"></a></div>';
$entry_approved = $row['approved'];
$id = $row['id'];
$ratings = $row["rating"];
if($entry_approved == 1){
ob_start();?>
<td>
<div class="contest-entry">
<div class="inner">
<?php echo $entry_pic; ?>
<div class="entry-name">
<p><strong>Submitted By:</strong> <?php echo $entry_name; ?></p>
</div>
<div class="entry-description">
<p><strong>Desctiption:</strong> <?php echo $entry_description; ?></p>
</div>
<div class="vote-container">
<span class="submitVote" >
<a href="#" id="<?php echo $id; ?>">VOTE</a>
</span>
<div id="voteBox">
<div id="vote"><strong><?php echo $ratings;?> Votes</strong></div>
</div>
<div id="greet"></div>
</div>
</div>
</div>
</td>
<?php echo ob_get_clean();
if ( ++$count % 4 == 0 ) {
echo '</tr><tr>';
}
}
}
echo '</tr></table>';


submitVote.php

include('db-connect.php');
if($_POST['id']){
$id=mysql_escape_String($_POST['id']);
$rating=mysql_escape_String($_POST['vote']);
$rating= $rating+1;
$sql = mysql_query("UPDATE entries SET rating={$rating} WHERE id={$id}");
$submitted = mysql_query( $sql, $db_connect );
if(! $submitted ) {
if($test_connection == true){
die("Cannot submit data " . mysql_error());
} else {
die('Could not enter data: ' . mysql_error());
}
}
}

If any one can help me, Thanks in advanced.