Star rating system in jquery, mootools & simple javascript

Star based rating system is created using html for user interface, client side script/language, server side script/language and database for storing the rating points. I have created three versions of rating systems using simple javascript, mootools, jquery for client side script. PHP for server side script for storing the rating points in MySQL database, actually one can use any server side scripts like C#,VB.NET, typically any language.

First we will create user interface for showing stars using html,

<div id="setrating">
Select Rating :
<img src="images/rate0.png" id="R1" alt="0" title="Not at All"/>
<img src="images/rate0.png" id="R2" alt="1" title="Somewhat" />
<img src="images/rate0.png" id="R3" alt="2" title="Average" />
<img src="images/rate0.png" id="R4" alt="3" title="Good" />
<img src="images/rate0.png" id="R5" alt="4" title="Very Good"/>
</div>

Next step is to attaching mouseover and click behavior to star images using client side script.

Javascript version

var imgs=document.getElementById('setrating').getElementsByTagName('img');
 for (i = 0; i < imgs.length; i++) {
      imgs[i].addEventListener("mouseover", function(e) {
         setRating(parseInt(e.target.alt) + 1)
      }, false)
      imgs[i].addEventListener("click", function(e) {
            submitRating(contentId, (parseInt(e.target.alt) + 1))
     },false)
 }

JQuery version

$('#setrating img').each(function(i) {
   $(this).mouseover(function() {
      setRating(i + 1) });
   $(this).click(function() {
      submitRating(contentId, i + 1)
});
})

Mootools version

$each($$('#setrating img'), function(e, i) {
   $(e).addEvent('mouseover', function() {
     setRating(i + 1)
 });
   $(e).addEvent('click', function() {
  submitRating(contentId, i + 1)
});
})

setRating is the function which changes the star image based on cursor mouse over,

function setRating(point)
{
 stars = new Array("R1","R2","R3","R4","R5");
 start = parseInt(point);
 for(i=0;i<5;i++)
 {
 if(i >= start)
   document.getElementById(stars[i]).src="images/rate0.png";
 if(i < parseInt(point))
   document.getElementById(stars[i]).src="images/rate1.png";
 }
}

submitRating is the function which will be invoked when user clicks on star image,

Javascript version

function submitRating(id,p) {
  if (p > 0) {
    var url = 'setrating.php';
    var img= '<img src="images/progress.gif" align="center">';
    document.getElementById('setrating').innerHTML=img;
    if (typeof XMLHttpRequest == "undefined")
       XMLHttpRequest = function() {
       try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
       catch (e) { }
       try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
       catch (e) { }
       throw new Error("This browser does not support XMLHttpRequest.");
     };
     onSuccess = function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       var r = eval('(' + xmlhttp.responseText + ')');
       eval(r.s);
       }
       }
       xmlhttp = XMLHttpRequest();
       var params = "id=" + id + "&p=" + p;
       xmlhttp.open("POST", url, true);
       xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       xmlhttp.setRequestHeader("Content-length", params.length);
       xmlhttp.setRequestHeader("Connection", "close");
       xmlhttp.onreadystatechange = onSuccess;
       xmlhttp.send(params);
  }  else
      alert("Please select your rating and submit!");
}

JQuery version

function submitRating(id, p) {
    if (p > 0) {
      var img= '<img src="images/progress.gif" align="center">'
      $('#setrating').html(img);
      var url = 'setrating.php';
      $.post(url, { 'id': id, 'p': p }, function(r) {
         eval(r.s)
      });
    }
    else
      alert("Please select your rating and submit!");
}

Mootools version

function submitRating(id,p) {
    if (p > 0) {
      var img= '<img src="images/progress.gif" align="center">';
      $('setrating').set('html',img);
        var url = 'setrating.php';
        var req = new Request.JSON({
            method: 'post',
            url: url,
            data: { 'id': id, 'p': p },
            onSuccess: function(r) {eval(r.s)},
            onFailure: function() {
              alert('Our server is tired, Please try after some time.')
             }
        }).send();
  }
  else
      alert("Please select your rating and submit!");
}

Once clicked on star, post request is send to server with parameters content id id and rating point p, server side script will handle the database update and JSON request is send back to client browser which will display rating added and the average rating till now.