PHP and AJAX Poll

This example consists of four pages: a simple HTML form a JavaScript a PHP page a text file to store the results The HTML Form Thi...

This example consists of four pages:
  • a simple HTML form
  • a JavaScript
  • a PHP page
  • a text file to store the results

The HTML Form

This is the HTML page. It contains a simple HTML form and a link to a JavaScript:

<script src="poll.js"></script> 
<div id="poll">
<h2>Do you like PHP and AJAX so far?</h2>
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">

Example Explained - The HTML Form

As you can see, the HTML page above contains a simple HTML form inside a "<div>" with two radio buttons.
The form works like this:
  1. An event is triggered when the user selects the "yes" or "no" option
  2. When the event is triggered, a function called getVote() is executed.
  3. Around the form is a <div> called "poll". When the data is returned from the getVote() function, the return data will replace the form.

The Text File

The text file (poll_result.txt) is where we store the data from the poll.
It is stored like this:


The first number represents the "Yes" votes, the second number represents the "No" votes.

Note: Remember to allow your web server to edit the text file. Do NOT give everyone access, just the web server (PHP).

The JavaScript

The JavaScript code is stored in "poll.js" and linked to in the HTML document:

var xmlHttp;

function getVote(int)
if (xmlHttp==null)
 alert ("Browser does not support HTTP Request");
var url="poll_vote.php";

function stateChanged() 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

function GetXmlHttpObject()
var objXMLHttp=null;
if (window.XMLHttpRequest)
 objXMLHttp=new XMLHttpRequest();
else if (window.ActiveXObject)
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
return objXMLHttp;

Example Explained

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter.
The getVote() Function
This function executes when "yes" or "no" is selected in the HTML form.
  1. Defines the url (filename) to send to the server
  2. Adds a parameter (vote) to the url with the content of the input field
  3. Adds a random number to prevent the server from using a cached file
  4. Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
  5. Opens the XMLHTTP object with the given url.
  6. Sends an HTTP request to the server

The PHP Page

The server page called by the JavaScript code is a simple PHP file called "poll_vote.php".

$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
 $yes = $yes + 1;
if ($vote == 1)
 $no = $no + 1;
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
<?php echo(100*round($yes/($no+$yes),2)); ?>%
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
<?php echo(100*round($no/($no+$yes),2)); ?>%

The selected value is sent from the JavaScript and the following happens:
  1. Get the content of the "poll_result.txt" file
  2. Put the content of the file in variables and add one to the selected variable
  3. Write the result to the "poll_result.txt" file
  4. Output a graphical representation of the poll result

Best Online Tutorials | Source codes | Programming Languages: PHP and AJAX Poll
PHP and AJAX Poll
Best Online Tutorials | Source codes | Programming Languages
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content