Search code examples
javascriptphphtmlajaxpolling

PHP AJAX Poll easy code changing from 2 variable answers to more than 2?

I am new and I'm trying to familiar myself with w3schools and teaching myself the odd bit of code. So far I am on PHP AJAX Poll ( http://www.w3schools.com/php/php_ajax_poll.asp ) and I understand most of it. I was then trying to add more values, although when I clicked on one of the poll answers it would show "one vote", however when I then reloaded the page the answer would not be there (it would go back to zero%). How would I go about adding extra polling answers?

Cheers.

This is my code in .html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>LameDesign</title>
<script src="../../Scripts/swfobject_modified.js" type="text/javascript"></script>
<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>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="540" id="FLVPlayer">
  <param name="movie" value="FLVPlayer_Progressive.swf" />
  <param name="quality" value="high">
  <param name="wmode" value="opaque">
  <param name="scale" value="noscale">
  <param name="salign" value="lt">
  <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_2&amp;streamName=../../backgroundwhite_14&amp;autoPlay=true&amp;autoRewind=false" />
  <param name="swfversion" value="8,0,0,0">
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="../../Scripts/expressInstall.swf">
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="960" height="540">
    <!--<![endif]-->
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="scale" value="noscale">
    <param name="salign" value="lt">
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_2&amp;streamName=../../backgroundwhite_14&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0">
    <param name="expressinstall" value="../../Scripts/expressInstall.swf">
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FLVPlayer");
</script>

<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)">
<br>Maybe:
<input type="radio" name="vote" value="2" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

And this is my .php code

<?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];
$maybe = $array[2];

if ($vote == 0) {
  $yes = $yes + 1;
}
if ($vote == 1) {
  $no = $no + 1;
}
if ($vote == 2) {
  $maybe = $maybe + 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+$maybe),3)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes+$maybe),3)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes+$maybe),3)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes+$maybe),3)); ?>%
</td>
</tr>
<tr>
<td>Maybe:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($maybe/($no+$yes+$maybe),3)); ?>'
height='20'>
<?php echo(100*round($maybe/($no+$yes+$maybe),3)); ?>%
</td>
</tr>
</table>
Solution

  • ResultHere you go, I have added a third option "maybe" check my code

    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];
$maybe = $array[2];

if ($vote == 0) {
  $yes = $yes + 1;
}
if ($vote == 1) {
  $no = $no + 1;
}
if($vote == 2){
     $maybe = $maybe + 1;
}

//insert votes to txt file
$insertvote = $yes."||".$no."||".$maybe;;
$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+$maybe),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes+$maybe),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes+$maybe),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes+$maybe),2)); ?>%
</td>
</tr>
<tr>
<td>May Be:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($maybe/($no+$yes+$maybe),2)); ?>'
height='20'>
<?php echo(100*round($maybe/($no+$yes+$maybe),2)); ?>%
</td>
</tr>
</table>

    And Index.html

    <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)">
<br>May be:
<input type="radio" name="vote" value="2" onclick="getVote(this.value)">
</form>
</div>

</body>
</html>