Need help with a small project!

**bugatti** · 05-01-2012, 08:35 PM

Hi, I am building a small site for fun, and I want to put a list on it. For every file or element in the list, I want to have two buttons. One to upvote that particular element, and one to downvote. Each element will be put in order on the list from highest number of upvotes to lowest, and I don't want any users to be able to vote more than once on each element. Does anyone know how to do this? The list should be able to display the number of votes each element has next to it. THANK YOU IN ADVANCE!

**JMRKER** · 05-01-2012, 10:26 PM

Show some sample code for the layout of the problem.
If this is for fun, then let's see the amusing part.

**bugatti** · 05-01-2012, 11:14 PM

It's so I can have polls on different stuff that update immediately on refresh, and though there's no function in this code, it kind of shows the layout:

<html>

<body>

<table border=1>
<tbody>
<tr>
<td>Dog</td>
<td>31 Vote(s)</td>
<td><input type="button" value="Vote Up!" /></td>
<td><input type="button" value="Vote Down!" /></td>
</tr>
<tr>
<td>Cat</td>
<td>26 Vote(s)</td>
<td><input type="button" value="Vote Up!" /></td>
<td><input type="button" value="Vote Down!" /></td>
</tr>
<tr>
<td>Fish</td>
<td>18 Vote(s)</td>
<td><input type="button" value="Vote Up!" /></td>
<td><input type="button" value="Vote Down!" /></td>
</tr>
<tr>
<td>Guinea Pig</td>
<td>13 Vote(s)</td>
<td><input type="button" value="Vote Up!" /></td>
<td><input type="button" value="Vote Down!" /></td>
</tr>
<tr>
<td>Gerbil</td>
<td>8 Vote(s)</td>
<td><input type="button" value="Vote Up!" /></td>
<td><input type="button" value="Vote Down!" /></td>
</tr>
<tr>
<td>Bird</td>
<td>1 Vote(s)</td>
<td><input type="button" value="Vote Up!" /></td>
<td><input type="button" value="Vote Down!" /></td>
</tr>
</tbody>
</table>

</body>

</html>

Obviously there's zero function in that script, it's just a table to demonstrate the layout a little more effectively. I think I can write the voting part and layout of the page, but I wouldn't know how to make the list order itself from high votes to low votes. Thanks a lot for the reply!

**Padonak** · 05-02-2012, 01:09 PM

php + mysql is what you need buddy

**JMRKER** · 05-02-2012, 01:22 PM

This might be a start for your project.

Note that JS limitations involve the inability to load/store a database. For this you will need some server-side code.
You might be able to use AJAX to read the text file (to create the 'voteResults' array)
but there is only limited storage ability in MSIE and none at all in the other browsers.

Code:

<!DOCTYPE html>
<!-- From: http://www.webdeveloper.com/forum/showthread.php?p=1205406#post1205406 -->
<html>
<script type="text/javascript">
var voteResults = [
  ['Dog',31],
  ['Cat',26],
  ['Fish',18],
  ['Guinea Pig',13],
  ['Gerbil',8],
  ['Bird',1],
];
function addVote(UpDown,ptr) {
  if (UpDown) { voteResults[ptr][1]++; }
         else { voteResults[ptr][1]--; }
  makeVoteTable();
}
function makeVoteTable() {
  var str = '';
  str += '<table border="1"><tbody>';
  for (var i=0; i<voteResults.length; i++) {
    str += '<tr>';
    str += '<th>'+voteResults[i][0]+'</th>';
    str += '<th>'+voteResults[i][1]+'</th>';
    str += '<td><input type="button" value="Vote Up!" onclick="addVote(true,'+i+')" /></td>';
    str += '<td><input type="button" value="Vote Down!" onclick="addVote(false,'+i+')" /></td>';
    str += '</tr>';
  }
  str += '</tbody></table>';
  document.getElementById('voteTable').innerHTML = str;
}
window.onload = function() { makeVoteTable(); }
</script>

<body>
<div id="voteTable"></div>
</body>
</html>

Note: You should enclose your script between [ code] and [ /code] tags (without the spaces)
to make it easier for viewers to see, copy, test, etc. you code.

**bugatti** · 05-02-2012, 01:40 PM

That table works very well and is exactly what I was looking for in the layout of the page, just a simple table.

However, in order for the page to save votes of users and display them on site load, what would be the best tool? For example, if "Bird" got votes, when it is reloaded, it shows 5 votes. Also, do you think I should add a log in script with sql to prevent people from voting twice on the same one? This way I could make it so only logged in users can vote. Thanks for the initial layout code, by the way.