Skip To Main Content | Home | Sitemap | Contact
Latest Visitors: United States's flagUnited States's flagUnited States's flagUnited States's flagUnited States's flagKorea  Republic of's flagUnited States's flagRussian Federation's flagChina's flagSweden's flagNetherlands's flagUnited States's flagUnited States's flagChina's flagChina's flagPakistan's flagUnited States's flagUnited States's flagUnited States's flagSpain's flagUnited States's flagUnited States's flagUnited States's flagUnited States's flagUnited States's flag
 

How can you record user's votes on a subject then show the results?

Use an ASP post handler page, an AJAX post to that, and build a dynamic JavaScript bar chart of Results

Do you like broccoli? 


This page's code
<%
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&#39;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?&nbsp; <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>  

ASP Poll Post Handler
<%
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
%>


This Weeks Most Popular Pages Newest Pages