Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

PHP instance AJAX voting


May 11, 2021 PHP


Table of contents


PHP Instance - AJAX Vote

This section is mainly to show you a voting program, describes the PHP-AJAX to implement the voting function of the method, let's take a look!

AJAX vote

In the following example, we will demonstrate a voting program through which the results are displayed without refreshing the page.

Do you like PHP and AJAX so far?

Yes:
No:

Instance Interpretation - HTML page

When the user selects one of the above options, a function named "getVote()" is executed. The function is triggered by the "onclick" event:

<html>
 <head>
 <script>
 function getVote(int)
 {
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("poll").innerHTML=xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET","poll_vote.php?vote="+int,true);
 xmlhttp.send();
 }
 </script>
 </head>
 <body>

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

 </body>
 </html> 

The getVote() function performs the following steps:

  • Create an XMLHttpRequest object
  • Create a function that executes when the server response is ready
  • Send a request to a file on the server
  • Note the parameters (q) added to the end of the URL (containing the contents of the pull-down list)

PHP file

The server page called by JavaScript above is a PHP file poll_vote.php":

<?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");
 fputs($fp,$insertvote);
 fclose($fp);
 ?>

 <h2>Result:</h2>
 <table>
 <tr>
 <td>Yes:</td>
 <td>
 <img src="poll.gif"
 width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
 height='20'>
 <?php echo(100*round($yes/($no+$yes),2)); ?>%
 </td>
 </tr>
 <tr>
 <td>No:</td>
 <td>
 <img src="poll.gif"
 width='<?php echo(100*round($no/($no+$yes),2)); ?>'
 height='20'>
 <?php echo(100*round($no/($no+$yes),2)); ?>%
 </td>
 </tr>
 </table> 

When the selected value is sent from JavaScript to the PHP file, it occurs:

  1. Gets the contents poll_result.txt the """
  2. Put the contents of the file into the variable and add 1 to the selected variable
  3. Write the results to poll_result.txt file
  4. Output graphical voting results

The text file

Data from the voting poll_result.txt is stored in a text file (or file).

The data it stores looks like this:

3||4

The first number represents the number of votes for "Yes" and the second number represents the number of votes for "No".

Note: Remember to allow only your web server to edit the text file. Don't let anyone else get access except the Web Server (PHP).