PHP Voting System with jQuery AJAX

In this tutorial, we are going to create a simple voting system using PHP and  jQuery AJAX. In this system, a visitor can vote (either up or down vote) only once that will be restricted by their IP address.

In this example, we are having up and down vote handlers which is triggered on event basis. This handlers call a PHP page via AJAX and send voting parameters to it. In that PHP page we will execute queries to update voting status in database.

View DemoDownload

php-jquery-voting

HTML Up Down Vote Buttons

This code contains PHP code for getting value for the up and down vote buttons attributes. These values will be varied based on the current voting status.

<div id="links-<?php echo $links["id"]; ?>">
<input type="hidden" id="votes-<?php echo $links["id"]; ?>" value="<?php echo $links["votes"]; ?>">
<?php
$vote_rank = 0;
$query ="SELECT SUM(vote_rank) as vote_rank FROM ipaddress_vote_map WHERE link_id = '" . $links["id"] . "' and ip_address = '" . $ip_address . "'";
$row = $db_handle->runQuery($query);
$up = "";
$down = "";

if(!empty($row[0]["vote_rank"])) {
	$vote_rank = $row[0]["vote_rank"];
	if($vote_rank == -1) {
	$up = "enabled";
	$down = "disabled";
	}
	if($vote_rank == 1) {
	$up = "disabled";
	$down = "enabled";
	}
}
?>
<input type="hidden" id="vote_rank_status-<?php echo $links["id"]; ?>" value="<?php echo $vote_rank; ?>">
<div class="btn-votes">
<input type="button" title="Up" class="up" onClick="addVote(<?php echo $links["id"]; ?>,'1')" <?php echo $up; ?> />
<div class="label-votes"><?php echo $links["votes"]; ?></div>
<input type="button" title="Down" class="down" onClick="addVote(<?php echo $links["id"]; ?>,'-1')" <?php echo $down; ?> />
</div>

</div>

jQuery Voting Handler

This jQuery function calls PHP to update voting status based on the vote request of the visitors. And then, it calculates the current total votes and the vote status of particular visitor by IP. The script is,

function addVote(id,vote_rank) {
	$.ajax({
	url: "add_vote.php",
	data:'id='+id+'&vote_rank='+vote_rank,
	type: "POST",
	beforeSend: function(){
		$('#links-'+id+' .btn-votes').html("<img src='LoaderIcon.gif' />");
	},
	success: function(vote_rank_status){
	var votes = parseInt($('#votes-'+id).val());
	var vote_rank_status;
	switch(vote_rank) {
		case "1":
		votes = votes+1;
		break;
		case "-1":
		votes = votes-1;
		break;
	}
	$('#votes-'+id).val(votes);
	$('#vote_rank_status-'+id).val(vote_rank_status);
	
	var up,down;
	
	if(vote_rank_status == 1) {
		up="disabled";
		down="enabled";
	}
	if(vote_rank_status == -1) {
		up="enabled";
		down="disabled";
	}	
	var vote_button_html = '<input type="button" title="Up" class="up" onClick="addVote('+id+',\'1\')" '+up+' /><div class="label-votes">'+votes+'</div><input type="button" title="Down" class="down"  onClick="addVote('+id+',\'-1\')" '+down+' />';	
	$('#links-'+id+' .btn-votes').html(vote_button_html);
	}
	});
}

Update Voting with PHP

This code receives AJAX data-string and pass these values to database queries to update voting status.

<?php
if(!empty($_POST["id"])) {
	require_once("dbcontroller.php");
	$db_handle = new DBController();
	$query = "INSERT INTO ipaddress_vote_map (ip_address,link_id,vote_rank) VALUES ('" . $_SERVER['REMOTE_ADDR'] . "','" . $_POST["id"] . "','" . $_POST["vote_rank"] . "')";
	$result = $db_handle->insertQuery($query);
	if(!empty($result)) {
	$query = "SELECT SUM(vote_rank) as vote_rank FROM ipaddress_vote_map  WHERE link_id = '" . $_POST["id"] . "' and ip_address = '" . $_SERVER['REMOTE_ADDR'] . "'";
	$row = $db_handle->runQuery($query);
	
	switch($_POST["vote_rank"]) {
		case "1":
			$update_query ="UPDATE links SET votes = votes+1 WHERE id='" . $_POST["id"] . "'";
		break;
		case "-1":
			$update_query ="UPDATE links SET votes = votes-1 WHERE id='" . $_POST["id"] . "'";
		break;
	}
	
	$result = $db_handle->updateQuery($update_query);	
	print $row[0]["vote_rank"];
	}
}
?>

View DemoDownload

This jQuery code tutorial was published on November 14, 2014.

↑ Back to Top