Creating a Dynamic Poll with jQuery and PHP

Jonathan Rudenberg on Jul 23rd 2008 with 266 comments

Tutorial Details

Programs: CSS, PHP, JavaScript
Difficulty: Intermediate
Completion Time: 1-2 hours

When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

HTML

Let’s get our <head> set up:

<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="poll.js" type="text/javascript" charset="utf-8"></script>

style.css will hold the CSS markup.
jquery.js is the base jQuery library.
jquery.cookie.js is a plugin by Klaus Hartl to add cookie manipulation to jQuery.
poll.js will have the Javascript that makes the poll dynamic.

Next, we’ll create a simple poll form:

<div id="poll-container">
    <h3>Poll</h3>
    <form id='poll' action="poll.php" method="post" accept-charset="utf-8">
        <p>Pick your favorite Javascript framework:</p>
        <p><input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'>&nbsp;jQuery</label><br />
        <input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'>&nbsp;Ext JS</label><br />
        <input type="radio" name="poll" value="opt3" id="opt3" /><label for='opt3'>&nbsp;Dojo</label><br />
        <input type="radio" name="poll" value="opt4" id="opt4" /><label for='opt4'>&nbsp;Prototype</label><br />
        <input type="radio" name="poll" value="opt5" id="opt5" /><label for='opt5'>&nbsp;YUI</label><br />
        <input type="radio" name="poll" value="opt6" id="opt6" /><label for='opt6'>&nbsp;mootools</label><br /><br />
        <input type="submit" value="Vote &rarr;" /></p>
    </form>
</div>

This form will be processed by the PHP for now, and when we get the Javascript running, by jQuery. The PHP and Javascript are designed to pull the option ID from the value tag.   is just a HTML entity encoded space, and → is an arrow: →.

PHP

Introduction

If Javascript is disabled, the PHP will:

Take GET/POST requests from the form
Set/check a cookie
Make sure the request is from a unique IP
Store the vote in a flat file DB
Return the results included with a HTML file

If Javascript is enabled, the PHP will:

Take GET/POST requests from the Javascript
Make sure the request is from a unique IP
Store the vote in a flat file DB
Return the results as JSON

For the flat file DB we will be using a package written by Luke Plant.

First, we need an array with the names and IDs of the poll options:

<?php
$options[1] = 'jQuery';
$options[2] = 'Ext JS';
$options[3] = 'Dojo';
$options[4] = 'Prototype';
$options[5] = 'YUI';
$options[6] = 'mootools';

The flatfile package uses numbers for the column identifiers, so lets set some constants to convert those to names:

define('OPT_ID', 0);
define('OPT_TITLE', 1);
define('OPT_VOTES', 2);

When the form is submitted, PHP needs to know what file to insert the results into and return, so we set another constant:

define('HTML_FILE', 'index.html');

We need to include flatfile.php and initialize a database object:

require_once('flatfile.php');
$db = new Flatfile();

The flat files are just text files stored in the data directory:

$db->datadir = 'data/';
define('VOTE_DB', 'votes.txt');
define('IP_DB', 'ips.txt');

If we get a request with the poll parameter, it’s the static form, so we process it. If the request has a vote parameter in it, it’s a Ajax request. Otherwise, we just return the HTML_FILE.

if ($_GET['poll'] || $_POST['poll']) {
  poll_submit();
}
else if ($_GET['vote'] || $_POST['vote']) {
  poll_ajax();
}
else {
  poll_default();
}

poll_default()

function poll_default() {
  global $db;

  $ip_result = $db->selectUnique(IP_DB, 0, $_SERVER['REMOTE_ADDR']);

  if (!isset($_COOKIE['vote_id']) && empty($ip_result)) {
    print file_get_contents(HTML_FILE);
  }
  else {
    poll_return_results($_COOKIE['vote_id']);
  }
}

poll_default() processes requests directly to the script with no valid GET/POST requests.

The global line makes the $db object available in the function’s scope.

The script tracks unique IPs to make sure you can only vote once, so we do a query to check whether it is in the DB:

$ip_result = $db->selectUnique(IP_DB, 0, $_SERVER['REMOTE_ADDR']);

If we don’t have a cookie and the IP query comes up empty, the client hasn’t voted yet, so we can just send the HTML file which contains the form. Otherwise, we just send the results:

if (!isset($_COOKIE['vote_id']) && empty($ip_result)) {
  print file_get_contents(HTML_FILE);
}
else {
  poll_return_results($_COOKIE['vote_id']);
}

poll_submit()

function poll_submit() {
  global $db;
  global $options;

  $id = $_GET['poll'] || $_POST['poll'];
  $id = str_replace("opt", '', $id);

  $ip_result = $db->selectUnique(IP_DB, 0, $_SERVER['REMOTE_ADDR']);

  if (!isset($_COOKIE['vote_id']) && empty($ip_result)) {
    $row = $db->selectUnique(VOTE_DB, OPT_ID, $id);
    if (!empty($row)) {
      $ip[0] = $_SERVER['REMOTE_ADDR'];
      $db->insert(IP_DB, $ip);

      setcookie("vote_id", $id, time()+31556926);

      $new_votes = $row[OPT_VOTES]+1;
      $db->updateSetWhere(VOTE_DB, array(OPT_VOTES => $new_votes), new SimpleWhereClause(OPT_ID, '=', $id));

      poll_return_results($id);
    }
    else if ($options[$id]) {
      $ip[0] = $_SERVER['REMOTE_ADDR'];
      $db->insert(IP_DB, $ip);

      setcookie("vote_id", $id, time()+31556926);

      $new_row[OPT_ID] = $id;
      $new_row[OPT_TITLE] = $options[$id];
      $new_row[OPT_VOTES] = 1;
      $db->insert(VOTE_DB, $new_row);

      poll_return_results($id);
    }
  }
  else {
    poll_return_results($id);
  }
}

poll_submit() takes the form submission, checks if the client has already voted, and then updates the DB with the vote.

These lines get the selected option’s ID, and set $id to it:

$id = $_GET['poll'] || $_POST['poll'];
$id = str_replace("opt", '', $id);

We need to check whether the option is in the DB yet:

$row = $db->selectUnique(VOTE_DB, OPT_ID, $id);

If it is in the DB (result not empty), we need to run an updateSetWhere(). If it isn’t we need to do an insert():

if (!empty($row)) {
  $new_votes = $row[OPT_VOTES]+1;
  $db->updateSetWhere(VOTE_DB, array(OPT_VOTES => $new_votes), new SimpleWhereClause(OPT_ID, '=', $id));

  poll_return_results($id);
}
else if ($options[$id]) {
  $new_row[OPT_ID] = $id;
  $new_row[OPT_TITLE] = $options[$id];
  $new_row[OPT_VOTES] = 1;
  $db->insert(VOTE_DB, $new_row);

  poll_return_results($id);
}

Either way, we need to insert the IP into the DB, and set a cookie (expires in one year):

$ip[0] = $_SERVER['REMOTE_ADDR'];
$db->insert(IP_DB, $ip);

setcookie("vote_id", $id, time()+31556926);

poll_return_results()

function poll_return_results($id = NULL) {
    global $db;

    $html = file_get_contents(HTML_FILE);
    $results_html = "<div id='poll-container'><div id='poll-results'><h3>Poll Results</h3>\n<dl class='graph'>\n";

    $rows = $db->selectWhere(VOTE_DB,
      new SimpleWhereClause(OPT_ID, "!=", 0), -1,
      new OrderBy(OPT_VOTES, DESCENDING, INTEGER_COMPARISON));

    foreach ($rows as $row) {
      $total_votes = $row[OPT_VOTES]+$total_votes;
    }

    foreach ($rows as $row) {
      $percent = round(($row[OPT_VOTES]/$total_votes)*100);
      if (!$row[OPT_ID] == $id) {
        $results_html .= "<dt class='bar-title'>". $row[OPT_TITLE] ."</dt><dd class='bar-container'><div id='bar". $row[OPT_ID] ."'style='width:$percent%;'>&nbsp;</div><strong>$percent%</strong></dd>\n";
      }
      else {
        $results_html .= "<dt class='bar-title'>". $row[OPT_TITLE] ."</dt><dd class='bar-container'><div id='bar". $row[OPT_ID] ."' style='width:$percent%;background-color:#0066cc;'>&nbsp;</div><strong>$percent%</strong></dd>\n";
      }
    }

    $results_html .= "</dl><p>Total Votes: ". $total_votes ."</p></div></div>\n";

    $results_regex = '/<div id="poll-container">(.*?)<\/div>/s';
    $return_html = preg_replace($results_regex, $results_html, $html);
    print $return_html;
}

poll_return_results() generates the poll results, takes the HTML file, replaces the form with the results, and returns the file to the client.

First, lets grab the HTML file and set $html to it:

$html = file_get_contents(HTML_FILE);

Next, we start the results HTML structure:

$results_html = "<div id='poll-container'><div id='poll-results'><h3>Poll Results</h3>\n<dl class='graph'>\n";

To create the results HTML we need to get all the rows (options) from the DB sorted by number of votes:

$rows = $db->selectWhere(VOTE_DB,
  new SimpleWhereClause(OPT_ID, "!=", 0), -1,
  new OrderBy(OPT_VOTES, DESCENDING, INTEGER_COMPARISON));

We also need the total votes to calculate percentages:

foreach ($rows as $row) {
  $total_votes = $row[OPT_VOTES]+$total_votes;
}

Next, we calculate the percentage of votes the current option has:

foreach ($rows as $row) {
  $percent = round(($row[OPT_VOTES]/$total_votes)*100);

The HTML for the results will be a definition list (<dl>) styled with CSS to create bar graphs:

$results_html .= "<dt class='bar-title'>". $row[OPT_TITLE] ."</dt><dd class='bar-container'><div id='bar". $row[OPT_ID] ."'style='width:$percent%;'>&nbsp;</div><strong>$percent%</strong></dd>\n";

Also, we should check if the current option is the one the client voted for, and change the color:

if (!$row[OPT_ID] == $id) {

}
else {
  $results_html .= "<dt class='bar-title'>". $row[OPT_TITLE] ."</dt><dd class='bar-container'><div id='bar". $row[OPT_ID] ."' style='width:$percent%;background-color:#0066cc;'>&nbsp;</div><strong>$percent%</strong></dd>\n";
}

Here, we add a total vote count and close the html tags:

$results_html .= "</dl><p>Total Votes: ". $total_votes ."</p></div></div>\n";

This is a regex that finds the poll-container <div>:

$results_regex = '/<div id="poll-container">(.*?)<\/div>/s';

The last step in this function is to replace the poll form with the results using the regex, and return the result:

$return_html = preg_replace($results_regex, $results_html, $html);
print $return_html;

poll_ajax()

function poll_ajax() {
  global $db;
  global $options;

  $id = $_GET['vote'] || $_POST['vote'];

  $ip_result = $db->selectUnique(IP_DB, 0, $_SERVER['REMOTE_ADDR']);

  if (empty($ip_result)) {
    $ip[0] = $_SERVER['REMOTE_ADDR'];
    $db->insert(IP_DB, $ip);

    if ($id != 'none') {
      $row = $db->selectUnique(VOTE_DB, OPT_ID, $id);
      if (!empty($row)) {
        $new_votes = $row[OPT_VOTES]+1;

        $db->updateSetWhere(VOTE_DB, array(OPT_VOTES => $new_votes), new SimpleWhereClause(OPT_ID, '=', $id));
      }
      else if ($options[$id]) {
        $new_row[OPT_ID] = $id;
        $new_row[OPT_TITLE] = $options[$id];
        $new_row[OPT_VOTES] = 1;
        $db->insert(VOTE_DB, $new_row);
      }
    }
  }

  $rows = $db->selectWhere(VOTE_DB, new SimpleWhereClause(OPT_ID, "!=", 0), -1, new OrderBy(OPT_VOTES, DESCENDING, INTEGER_COMPARISON));
  print json_encode($rows);
}

poll_ajax() takes a request from the Javascript, adds the vote to the DB, and returns the results as JSON.

There are a few lines of code that are different from poll_submit(). The first checks if the Javascript just wants the results, and no vote should be counted:

if ($id != 'none')

The other two lines select the whole DB and return it as JSON:

$rows = $db->selectWhere(VOTE_DB, new SimpleWhereClause(OPT_ID, "!=", 0), -1, new OrderBy(OPT_VOTES, DESCENDING, INTEGER_COMPARISON));
print json_encode($rows);

CSS

.graph {
  width: 250px;
  position: relative;
  right: 30px;
}
.bar-title {
  position: relative;
  float: left;
  width: 104px;
  line-height: 20px;
  margin-right: 17px;
  font-weight: bold;
  text-align: right;
}
.bar-container {
  position: relative;
  float: left;
  width: 110px;
  height: 10px;
  margin: 0px 0px 15px;
}

.bar-container div {
  background-color:#cc4400;
  height: 20px;
}
.bar-container strong {
  position: absolute;
  right: -32px;
  top: 0px;
  overflow: hidden;
}
#poll-results p {
  text-align: center;
}

This CSS styles the results returned by the PHP or Javascript.

.graph styles the container for the bars, titles and percentages. The width will be different for each site.
.bar-title styles the titles for the bar graphs.
.bar-container styles the individual bar and percentage containers
.bar-container div styles the div that the bar is applied to. To create the bars, a percentage width is set with PHP or Javascript.
.bar-container strong styles the percentage.
#poll-results p styles the total votes.

Javascript

Introduction

The Javascript will intercept the submit button, send the vote with Ajax, and animate the results.

First, some global variables. You should recognize the first three from the PHP. votedID stores the ID of the option the client voted for.

var OPT_ID = 0;
var OPT_TITLE = 1;
var OPT_VOTES = 2;

var votedID;

Now we need a jQuery ready function which runs when the page loads:

$(document).ready(function(){

Inside that function we register the handler for the vote button which will run formProcess when it is triggered:

$("#poll").submit(formProcess);

We also need to check if the results <div> exists, and animate the results if it does:

if ($("#poll-results").length > 0 ) {
    animateResults();
}

If we have a cookie we should jump straight to generating the results because the user has already voted. To do that we need to get rid of the poll form, get the id from the cookie, grab the results from the PHP and pass them to loadResults().

if ($.cookie('vote_id'))
    $("#poll-container").empty();
    votedID = $.cookie('vote_id');
    $.getJSON("poll.php?vote=none",loadResults);
}

formProcess()

function formProcess(event){
  event.preventDefault();

  var id = $("input[@name='poll']:checked").attr("value");
  id = id.replace("opt",'');

  $("#poll-container").fadeOut("slow",function(){
    $(this).empty();

    votedID = id;
    $.getJSON("poll.php?vote="+id,loadResults);

    $.cookie('vote_id', id, {expires: 365});
    });
}

formProcess() is called by the submit event which passes it an event object. It prevents the form from doing a normal submit, checks/sets the cookies, runs an Ajax submit instead, then calls loadResults() to convert the results to HTML.

First, we need to prevent the default action (submitting the form):

event.preventDefault();

Next, we get the ID from the currently selected option:

var id = $("input[@name='poll']:checked").attr("value");
id = id.replace("opt",'');

input[@name='poll']:checked is a jQuery selector that selects a <input> with an attribute of name='poll' that is checked. attr("value") gets the value of the object which in our case is optn where n is the ID of the option.

Now that we have the ID, we can process it. To start, we fade out the poll form, and setup an anonymous function as a callback that is run when the fade is complete. Animations don’t pause the script, so weird things happen if you don’t do it this way.

$("#poll-container").fadeOut("slow",function(){

After it has faded out we can delete the form from the DOM using empty():

$(this).empty();

In this case, $(this) is jQuery shorthand for the DOM element that the fade was applied to.

jQuery has some other shortcut functions, including $.getJSON() which does GET request for a JSON object. When we have the object, we call loadResults() with it:

$.getJSON("poll.php?vote="+id,loadResults);

The last thing to do is set the cookie:

$.cookie('vote_id', id, {expires: 365});

loadResults()

function loadResults(data) {
  var total_votes = 0;
  var percent;

  for (id in data) {
    total_votes = total_votes+parseInt(data[id][OPT_VOTES]);
  }

  var results_html = "<div id='poll-results'><h3>Poll Results</h3>\n<dl class='graph'>\n";
  for (id in data) {
    percent = Math.round((parseInt(data[id][OPT_VOTES])/parseInt(total_votes))*100);
    if (data[id][OPT_ID] !== votedID) {
      results_html = results_html+"<dt class='bar-title'>"+data[id][OPT_TITLE]+"</dt><dd class='bar-container'><div id='bar"+data[id][OPT_ID]+"'style='width:0%;'>&nbsp;</div><strong>"+percent+"%</strong></dd>\n";
    } else {
      results_html = results_html+"<dt class='bar-title'>"+data[id][OPT_TITLE]+"</dt><dd class='bar-container'><div id='bar"+data[id][OPT_ID]+"'style='width:0%;background-color:#0066cc;'>&nbsp;</div><strong>"+percent+"%</strong></dd>\n";
    }
  }

  results_html = results_html+"</dl><p>Total Votes: "+total_votes+"</p></div>\n";

  $("#poll-container").append(results_html).fadeIn("slow",function(){
    animateResults();});
}

loadResults() is called by $.getJSON() and is passed a JSON object containing the results DB. It is pretty much the same as it’s PHP counterpart poll_return_results() with a few exceptions. The first difference is that we set the width on all the bars to 0% because we will be animating them. The other difference is that we are using a jQuery append() instead of regex to show the results. After the results fade in, the function calls animateResults().

animateResults()

function animateResults(){
  $("#poll-results div").each(function(){
      var percentage = $(this).next().text();
      $(this).css({width: "0%"}).animate({
                width: percentage}, 'slow');
  });
}

animateResults() iterates through each of the bars and animates the width property based on the percentage.

each() is a jQuery function that iterates through each element that is selected:

$("#poll-results div").each(function(){

First, we set the percentage to the text of the element next to the bar which is the <strong> containing the percentage.

var percentage = $(this).next().text();

Then we make sure the width is set to 0%, and animate it:

$(this).css({width: "0%"}).animate({
  width: percentage}, 'slow');

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Jonathan Rudenberg

Rollover to read this author's bio or click through to see a full list of posts by this author.

I am a high school student living in Canada who is passionate about technology. I use OS X and TextMate for development.

Plus Premium

Add Comment

Discussion 266 Comments

Comment Page 5 of 5« 1 ... 3 4 5

bungabunga says:

December 15, 2010 at 7:54 am

If you use a PHP version < 5.2 then you should move the json_encode() function definition at the beginning of the script poll.php.

Reply
Richard says:

January 13, 2011 at 11:51 am

Hi..

Yes, even the demo is not working.
Here’s a fix that worked for me.

1. Edit poll.php
Replace: $id = $_GET['vote'] || $_POST['vote'];
With: $id = isset($_GET['vote']) ? $_GET['vote'] : $_POST['vote'];
and
Replace: $id = $_GET['poll'] || $_POST['poll'];
With: $id = isset($_GET['poll']) ? $_GET['poll'] : $_POST['poll'];

2. After editing the 2 lines in the poll.php file, make sure:
- Delete the cookies in your browser
- Delete your IP in /data/ips.txt

3. Make sure you have R/W permission on the ‘data/ folder

You can see the working poll here -> http://www.explorephilippines.org – near the bottom of the home page.

Reply
- fano says:
  
  December 10, 2011 at 12:54 pm
  
  Had the common “ips.txt updates but vote.txt won’t” issue.
  In addition to Richard’s tweaks, I added a closing ?> tag in poll.php and set both text files permissions to: 644 and voila!
  Hope that can help.
  
  Reply
- Balakadut says:
  
  January 12, 2012 at 12:50 am
  
  thanks a lot…. works very well
  
  Reply
Angelina says:

February 27, 2011 at 11:34 pm

Nice pool example in jQuery i really like and will add to my website, thanks for shearing this nice stuff

Reply
Graphiics says:

March 2, 2011 at 6:08 am

Nice1

Reply
Greg says:

March 11, 2011 at 6:38 am

This is a good article/and it works => http://206.251.38.181/jquery-learn/ajax-poll/
is there a way to make a ‘panel’ of sorts to dynamically add new polls? (or manage exisiting ones?)
maybe another great idea for another nettut? :-D
thanks!

Reply
Roberto says:

March 13, 2011 at 6:46 am

I need a little help on this code. I’ve working perfect, but I need to write multiple options in the datebase, not an unique option like in the demo.

Can anyone help me to change the code in poll_submit() where it updates the DB with the vote, to update the DB with one or more votes?

Thank you very much!

Reply
adelina says:

March 26, 2011 at 7:00 am

Everything’s fine now that I have replaced what Richard said but I get in results this:
null NAN%Total
null NAN%
null NAN%
null NAN%
Votes NaN

Can someone please tell me why can this be?

Reply
George says:

April 24, 2011 at 6:16 am

I would like to see the same example with asp.net and JQuery.

Reply
Arona says:

May 4, 2011 at 8:47 am

Hello!
I’m having headaches with this poll. the results are not showing up!!! I have modified my source code after reading Richard’s post, but always the same problem: When i click on view results, i have a blank area instead

Reply
Curtis says:

May 24, 2011 at 11:26 am

All is working except for writing the new vote to the txt file. It would not create the txt file on its own like others have stated? It did create the ips.txt file but not the votes.txt file? Any ideas?

Again it just won’t update the votes, everything else is working fine. Thanks for all the effort on this script guys and gals.

Reply
Curtis says:

May 25, 2011 at 11:53 am

My bad, I finally narrowed it down to my ajax routine and I had forgot to change the line there that Andrew had mentioned. All working fine now. Thanks again crew!!

Reply
Felipe says:

June 22, 2011 at 11:09 am

I really can’t believe this hasn’t been fixed by the author or Nettuts. If it doesn’t work it’s better to be removed. 2 years have passed.

Reply
rainbow young says:

June 27, 2011 at 3:07 am

Hello,why it doesn’t work after i install this program in apache enviroment.

Reply
davie says:

August 4, 2011 at 5:08 pm

how many parts do you have to edit if you were wanting to create a new poll,, i.e

How easy is this poll to change?

1, very easy
2, very hard
3, no idea

would you only edit the index.html file and it auto takes all the info it needs or do you have to edit multiple files in order to create a new poll?

Reply
VM says:

September 8, 2011 at 1:57 am

Hi, is there any non-form poll like this using jquery? example, using option+image. thanks

Reply
Patrick says:

September 12, 2011 at 7:27 am

Well, I have spent the last two days trying to figure out why this will not work and for some reason, it just will not add to the vote.txt – I cleared out the file to see what it does but nothing happens. The only file I changed was that one. Also, I have tried everyone’s suggestion on modifying the php file in another folder and testing it separately without success.

Reply
Primoz says:

October 1, 2011 at 4:32 am

Can anyone paste a zip file of workin poll?

Btw looks aweome!!

Reply
Ari says:

October 4, 2011 at 6:39 am

I have problem when i trying to get poll result, i lose my includes and some divs.
I got index.php and swich = page. When i press vote it redirects to poll.php not index.php?
And then i lose all my divs, in index.php i have pasted the code. Voting works but not results.
Good script but i am lost…

Reply
aaa says:

October 5, 2011 at 1:45 am

shit! not work!

Reply
Mirek says:

October 6, 2011 at 6:04 am

Has someone a working version of this script? It has really strange behaviour and it is complicated to debug. As you have to delete cookies everytime you test it (zap cookie bookmarklet) and also delete content of ips.txt and votes.txt and also made a lot of changes to php to force it to work. This is really not good done tutorial. Another problem there (noone listed yet) is that when you testing it javascript cache the previous result, so that is why there should be in poll.js something like $.getJSON(“poll.php?vote=none”+’?random=’+Math.floor(Math.random()*1000),loadResults);
to be able to test it. I spent around 4 hours to try to solve some another problems with czech characters in $options and i was not able to find solution, maybe someone know how to store data in xml instead txt to be able run this in different lang then english

Reply
David says:

October 13, 2011 at 5:05 am

Hi. Thanks for this. I would like to know, do you nedd both the poll.php and poll.js, or can i use this just as a jquery plugin, without the php part? Or do they work togehter?

Thanks (Sorry if the question sound stupid, I’m still a beginner)

Reply
Brendan says:

October 16, 2011 at 3:31 pm

Here is another example of creating a custom poll with Javascript and PHP: http://www.bheberto.com/devblog.php?id=5 Would be interested in hearing your thoughts.

Reply
Rosa says:

October 24, 2011 at 2:53 pm

Hi Jonathan.

Great script! When you submit the poll however, the page jumps up a little (is kind of reloaded) and you can’t see the results without scrolling back down the page. Is there a way around this?

Thanks!

Rosa

Reply
chinaboy says:

October 24, 2011 at 8:00 pm

Why do I always votes add do not?

Reply
tvuolo says:

October 25, 2011 at 1:38 pm

Hi, the link to the source is not working. The correct link should be:
http://nettuts.s3.amazonaws.com/026_Poll/demo.zip

Reply
Nadir says:

December 12, 2011 at 1:38 pm

Hi,
In the demo all is fine but the results are not displayed et all. Is there any specific reason why no results are displayed.

Thanks.

Reply
Haymouth says:

January 26, 2012 at 7:20 am

This would be so cool if it actually worked! The results don’t show up in the downloaded demo.

Reply
shesha says:

February 7, 2012 at 12:37 am

nice example…but have a small doubt shuld we create any table in the database……..

Reply
- MArty says:
  
  February 12, 2012 at 8:15 pm
  
  It’s not working , I give up~
  
  Reply
gps says:

February 23, 2012 at 8:52 pm

Why still use flat file DB instead of SQLite?
Not only the use of DBMS is more convenience than flat file, but also it is easier to understand.
Thanks for useful tutorial!

Reply
Alpner says:

March 1, 2012 at 2:36 am

After more than 15h of work. It works! I don’t know how, but it works! :)

Reply
James says:

March 9, 2012 at 2:21 am

Is there anything similar in Classic ASP?

Reply
GWIT says:

April 4, 2012 at 7:04 am

Hi thanks for this great code. I m quiet a beginner in Jquery, and especially Jquery plugins and I would like to know if it’s possible and how it’s possible to transform your JS funtion into a plugin, I mean make

$(document).ready(function(){
$(“#poll”).submit(formProcess); // setup the submit handler

if ($(“#poll-results”).length > 0 ) {
animateResults();
}

if ($.cookie(‘vote_id’)) {
$(“#poll-container”).empty();
votedID = $.cookie(‘vote_id’);
$.getJSON(“poll.php?vote=none”,loadResults);
}
});

which is applicable only to elements ” $(“#poll”)” to a borader element : “this”, which is from what i understood the principle of a plugins. Thanks.

Reply
- TutCommenter says:
  
  April 13, 2012 at 10:33 am
  
  Yes it is possible. Do it and share it with us.
  
  Reply
Grayson says:

April 19, 2012 at 8:38 pm

Throughout 200-something comments I don’t see where anyone has this working … myself included. Am I wrong? I get the same as all others: no update of vote.txt. Permissions usually make users oversee the obvious. Data directory 777 txt files 755, 644 and everything in between. All main files 644. Zippo, nada, nil, nothign to update vote.txt. Anyone looking at this script should read the unanswered posts before making the effort.

Reply
Matt says:

April 20, 2012 at 12:15 pm

Hey Guys,

This Poll DOES work and after fighting with it for hours, I figured out the problems and I’ll share them here so all of you can get it working. The fact that is uses a flat file (no database) and that it stores a cookie makes this one of the easiest compact polls out there which is why we’re all craving to get this working.

So — here’s what I did:

1) I’m not sure if it’s really necessary, but following one of the posts above, I edited poll.php as follows:

Replace: $id = $_GET['vote'] || $_POST['vote'];
With: $id = isset($_GET['vote']) ? $_GET['vote'] : $_POST['vote'];

and

Replace: $id = $_GET['poll'] || $_POST['poll'];
With: $id = isset($_GET['poll']) ? $_GET['poll'] : $_POST['poll'];

Add a closing ?> tag in poll.php

2) Edit poll.php with your preferred poll questions. This is pretty obvious.

3) Edit the votes.txt file to represent your poll answers. The info here does NOT have to be the same text as your poll questions. You can abbreviate or alter if necessary, but you DO need the ID number in front of the poll answer and you MUST have a vote count as a starting place, so maybe use 1 for everything. Also, because of the way text files are encoded, use a TAB to separate your ID, answer, and vote count.

Most of you should know this already, but do NOT edit this file with Microsoft word. You must use Dreamweaver, Apple’s Text Edit (in plain text mode), or Window’s notepad. For those unaware, using other text editing programs embed hidden things you can’t see which make the file difficult to read and function. Use a very basic text editor! Keep this in mind for future projects, young bucks!

4) HERE’S THE KICKER I DISCOVERED and I suspect this is the problem most of you had in not getting poll results. When you edit the vote.txt file with your ID number, answer, and vote count, be sure there are NO trailing spaces after the last entry. If you have ANYTHING after the last entry, the voting results will fail.

If these answers don’t get it working for you, I suggest checking your permissions of the folders and files and see if you need to set the DATA folder to 755 or 777.

Yes, you can send your Ducati’s, racing jackets, and gear to me in gratitude. lol

Reply
Juve Colunga says:

April 26, 2012 at 1:45 pm

Hello, thnks a lot for this tutorial, i would like to know, is there some how can i share the choice or (and) result on facebook or do a twitt about it?

thnks!!!!

Reply

Comment Page 5 of 5« 1 ... 3 4 5

Add a Comment

RSS Subscribers 103,573

Twitter Followers 52,256

Facebook Fans 37,119

Facebook
Twitter
Google+

Follow Nettuts+ and Tuts+ on Twitter

@webwerken There is no complaint. I said it was a solid editor.
@ben_corlett That's the light version of Solarized. There's a link to it in the article.
@oscargodson Control + q
@coutoantisocial Why would you want a review of an editor by an inexperienced person?

Join our newsletter!

Freelance Jobs

More Freelance Jobs...

Create a Tutorial, Get Paid!

Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More

Creating a Dynamic Poll with jQuery and PHP

Tutorial Details

HTML

PHP

Introduction

poll_default()

poll_submit()

poll_return_results()

poll_ajax()

CSS

Javascript

Introduction

formProcess()

loadResults()

animateResults()

Enjoyed this Post?

By Jonathan Rudenberg

Hello!

Premium Members

Discussion 266 Comments

Add a Comment

Hello!

Follow Nettuts+ and Tuts+ on Twitter

Join our newsletter!

Create a Tutorial, Get Paid!