Here is the MySQL query that would do just the job.

SELECT person,
SUM(IF(vote = "yes", 1,0)) AS `yes_votes`,
SUM(IF(vote = "no", 1,0)) AS `no_votes`,
COUNT(vote) AS `total`
FROM votes
GROUP BY person
ORDER BY yes_votes DESC


The following would be the result of the query:

The beauty of the query all lies in the SUM IF statements. For example, in order to count the yes votes, the IF statement will check to see if vote = “yes” as it loops through all the rows. If so, the yes_votes column alias is incremented by 1. The same procedure goes for counting the no votes. The COUNT statements keeps a tally on the total number of votes. The GROUP BY person statement allows the vote counters to calculate the numbers by person instead of the total number of yes and no votes.

Now, you do not have to loop through your MySQL results to count column values =)

Here is the plain HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<form name="thisForm">
I like to program in:<p>
<input type="checkbox" value="PHP" CHECKED>PHP<p>
<input type="checkbox" value="Perl">Perl<p>
<input type="checkbox" value="Ruby">Ruby<p>
<input type="checkbox" value="ASP">ASP<p>
<hr>
I like to eat:<p>
<input type="radio" value="Snickers" name="candy" CHECKED>Snickers<p>
<input type="radio" value="Hershey's" name="candy">Hershey's<p>
<input type="radio" value="M&M's" name="candy">M&M's<p>
<input type="radio" value="Nerds" name="candy">Nerds<p>
<hr>
I like to drink:<p>
<input type="radio" value="Coke" name="drink" CHECKED>Coke<p>
<input type="radio" value="Gatorade" name="drink">Gatorade<p>
<input type="radio" value="Pepsi" name="drink">Pepsi<p>
<input type="radio" value="Milk" name="drink">Milk<p>
<br>
<input type="button" value="Submit" onclick="loopForm(document.thisForm);"> 
</form>
<p>
<div id="cbResults"></div>
<div id="radioResults"></div>

As usual, there is not too much action going on here. It is just a plain form with some checkboxes and 2 radio button groups called candy and drink. Radio buttons with the same name will be grouped and allows the users to only select one option out of the entire group. The submit button will launch the loopForm JavaScript function and the myForm DOM object is passed over as an argument. There are also 2 divs in lines 23-24 where are checkbox and radio button results will be posted. Now, on to more exciting things.

Here is the JavaScript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function loopForm(form) {
    var cbResults = 'Checkboxes: ';
    var radioResults = 'Radio buttons: ';
    for (var i = 0; i < form.elements.length; i++ ) {
        if (form.elements[i].type == 'checkbox') {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ' ';
            }
        }
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                radioResults += form.elements[i].value + ' ';
            }
        }
    }
    document.getElementById("cbResults").innerHTML = cbResults;
    document.getElementById("radioResults").innerHTML = radioResults;
}

This function loops through all the elements in the form that was passed over to the function.

If the element is of checkbox type and it is checked, the value of this element will be appended to our cbResults variable which is keeping track of our checkbox results.

If the element is of radio type and it is checked, the value of this element will be appended to our radioResults variable which is keeping track of our radio button results.

After all the looping is finished, the results are cbResults and radioResults are inserted into the cbResults div and radioResults div respectively.