Do you like broccoli?

<%
Option Explicit
Session.CodePage=65001
Response.Charset="UTF-8"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<title>ASP And JavaScript Poll</title>
<script type="text/javascript">
//<![CDATA[
// Does this browser support try-catch?
var tc = false;
try {
tc = true;
} catch(f) { }
var xmlHttpError = 'XML HTTP Request: OK';
function getRequestObject() {
var objRequest;
if (window.ActiveXObject) {
if (tc) {
try {
objRequest = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e) {
try {
objRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(f) { }
}
} else {
objRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
} else if (window.XMLHttpRequest) {
objRequest = new XMLHttpRequest();
if (objRequest.overrideMimeType) {
objRequest.overrideMimeType('text/html');
}
}
return objRequest;
}
function doVote(oButton) {
document.getElementById('voteform').style.display='none';
document.getElementById('waiting').style.display='inline';
document.getElementById('results').style.display='none';
var vote = oButton.value; // yes or no
var parameters = 'vote=' + vote;
var objRequest = getRequestObject();
if (typeof(objRequest)=='object') {
if (objRequest.readyState>=0) {
objRequest.onreadystatechange = function() { handleHttpResponse(objRequest, 'results'); };
objRequest.open('POST', 'poll_vote_ajax_asp_dovote.asp', true);
objRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
objRequest.setRequestHeader("Content-length", parameters.length);
objRequest.setRequestHeader("Connection", "close");
objRequest.send(parameters);
}else{
xmlHttpError = 'XML HTTP Request Object Unavailable';
return false;
}
}else{
xmlHttpError = 'XML HTTP Request Object Not Supported';
return false;
}
}
function handleHttpResponse(pObjRequest, pElementId) {
if (pObjRequest.readyState==4) {
if (pObjRequest.status==200) {
document.getElementById('voteform').style.display='none';
document.getElementById('waiting').style.display='none';
document.getElementById('results').style.display='inline';
var votes = pObjRequest.responseText.split(',');
var tmp = votes[0].split('=');
var yeses = parseInt(tmp[1]);
tmp = votes[1].split('=');
var nos = parseInt(tmp[1]);
var yp = Math.round((yeses / (yeses + nos)) * 100);
var yn = Math.round((nos / (yeses + nos)) * 100);
var barchart = '<span>Do people Like broccoli</span><br>';
barchart += '<div class="votes"><div class="chart"><img border="0" src="images/1x15navy.gif" width="'+yp+'" height="15"></div>Yes: '+yp+'%</div>';
barchart += '<div class="votes"><div class="chart"><img border="0" src="images/1x15navy.gif" width="'+yn+'" height="15"></div>No: '+yn+'%</div>';
document.getElementById(pElementId).innerHTML=barchart;
pObjRequest=null;
}
}
}
//-->
</script>
<style type="text/css">
<!--
#waiting, #results {
display:none;
}
.votes {
width: 200px;
height: 15px;
margin-bottom:3px;
}
.chart {
float:right;
width: 100px;
height: 15px;
border:1px solid navy;
}
-->
</style>
</head>
<body>
<div id="topmenu"><!--#include file="topMenu.htm"--></div>
<div id="banner"><!--#include virtual="include/banner.htm"--></div>
<div id="mainmenu"><!--#include file="mainMenu.htm"--></div>
<noscript><p>You need JavaScript to view this example.</p></noscript>
<div><h2>How can you record user's votes on a subject then show the results?</h2></div>
<div class="breaker">Use an ASP post handler page, an AJAX post to that, and build a dynamic JavaScript bar chart of Results<br></div>
<div id="theExample">
<p id="voteform">Do you like broccoli? <input type="button" value="Yes" name="yes" onclick="doVote(this);"> <input type="button" value="No " name="no" onclick="doVote(this);"></p>
<p id="waiting"><img border="0" src="images/ajaxCallChangeImage_wait.gif"></p>
<div id="results"><img border="0" src="images/1x15navy.gif" width="1" height="15"></div>
</div>
<div id="pageCopyright"><!--#include virtual="include/copyright.htm"--></div>
<div id="legal"><!--#include virtual="include/legal.htm"--></div>
</body>
</html>
<%
if (Request.ServerVariables("HTTP_METHOD")="POST") then
if Request.Form("vote")="Yes" Or Request.Form("vote")="No" Then
' we have a valid vote
' submit the vote to the database
' query the database for the results of all votes
' return the results
Response.Write("yes=23,no=7")
else
Response.Write("error vote=" & Request.Form("vote"))
end if
else
Response.Status = "403 Forbidden"
Response.Flush
Response.End
end if
%>
Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .