Ajax Poll Script With PHP, MySQL & jQuery

In this tutorial, we'll be creating an Ajax Poll Script that displays the results with colored and animated lines using PHP, MySQL and jQuery.

The script has a pretty easy logic and can be implemented into any website quickly by simply calling a php function like getPoll(2) which brings the second poll.

The code has 3 parts: HTML, JavaScript (jQuery) and PHP. Let's start with the easiest one:

HTML

The HTML for the poll is generated within the PHP function which is usually nice as it is only a 1-line-code and doesn't create a visual pollution in the overall HTML.

[sourcecode language=”html”]

Poll Question 1

Answer1 for Poll1

Answer2 for Poll1

[/sourcecode]

There is nothing original here. In one of the list items, we mention the answer and provide a unique ID for it which matches that answer's answerID in the database. For the other list item, we reserve it for the colored line, again by giving it the unique ID.

PHP

We first include our db connection file and handle the posted items from the Ajax requests

And, the getPollResults function which is kinda tricky but not that much.

When ran, it returns a string like: 1|13|#ffcc00-2|32|#00ff00-3|18|#cc0000-63" which the first number is the answerID, second is the points it has and third is the color for that answer's animated line.

The last number is the sum of all points for easily calculating percentages.

jQuery (JavaScript)

It is only an Ajax request that posts the selected answer to the PHP code, gets the string in return, parses it and makes some show/hide tricks for displaying and hiding the messages or loaders.

Here it is:

[sourcecode language=”javascript”]
$(document).ready(function() {

$(“#pollAjaxLoader”).hide(); //hide the ajax loader
$(“#pollMessage”).hide(); //hide the ajax loader
$(“#pollSubmit”).click(function() {
var pollAnswerVal = $(‘input:radio[name=pollAnswerID]:checked’).val();//Getting the value of a selected radio element.
if ($(‘input:radio[name=pollAnswerID]:checked’).length) {
$(“#pollAjaxLoader”).show(); //show the ajax loader
$.ajax({
type: “POST”,
url: “inc/functions.php”,
data: { pollAnswerID: pollAnswerVal, action: “vote” },
success: function(theResponse) {
//the functions.php returns a response like “1|13|#ffcc00-2|32|#00ff00-3|18|#cc0000-63” which the first number is the answerID, second is the points it has and third is the color for that answer’s graph. The last number is the sum of all points for easilt calculating percentages.
if (theResponse == “voted”) {
$(“#pollAjaxLoader”).hide(); //hide the ajax loader
$(“#pollMessage”).html(“sorry, you already voted.”).fadeTo(“slow”, 1);
} else {
var numberOfAnswers = (theResponse).split(“-“).length-2;//calculate the number of answers
var splittedResponse = (theResponse).split(“-“);
var pollAnswerTotalPoints = splittedResponse[numberOfAnswers+1];