Internet Explorer Logo

JavaScript 5 Star Rating System


I was asked to create a 5 star rating system for a few shows on NBC.com. So I created the following code. This is just the scaled down version but it works pretty well. You will need to add in extra code to send the results somewhere using Ajax or something like that. Try it out!


The idea here was to make this thing as simple as possible to add as many stars as you want without having to write out some long crazy code to make this happen. I'm sure I could simplify this a little more, I'll work on that later. For now, let's get into implementation of the stars.

The first part of the system is the HTML:

<span id="rateStatus">Rate Me...</span>
<span id="ratingSaved">Rating Saved!</span>

The first span tag is for the "Status" or what the stars/images represent. The other one is the information that will be displayed .

NEXT! The rating stars themselves:

<div id="rateMe" title="Rate Me...">
    <a onclick="rateIt(this)" id="_1" title="ehh..." onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_2" title="Not Bad" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_3" title="Pretty Good" onmouseover="rating(this)" onmouseout="off(this)"></a>
</div>

If you want to add more stars, just simply add another anchor to the list and increase it's ID to keep track of it's "rating"

NEXT! Let's add some style:

<style type="text/css">
    #rateStatus{float:left; clear:both; width:100%; height:20px;}
    #rateMe{padding:0px; margin:0px;}
    #rateMe li{float:left;list-style:none;}
    #rateMe li a:hover,
    #rateMe .on{background:url(star_on.gif) no-repeat;}
    #rateMe a{float:left;background:url(star_off.gif) no-repeat;width:12px; height:12px;}
    #ratingSaved{display:none;}
    .saved{color:red; }
</style>

To change the "Stars" to whatever image you want to use, change the background "url" image location in the "#rateMe .on" and "#rateMe a" styles.

NEXT! Include the script and your are done!

<script type="text/javascript" language="javascript" src="ratingsys.js"></script>

This script can be added anywhere on the page. You can   DOWNLOAD IT HERE.

Inside the script you will see a function at the bottom that say's "sendRate()". That is where you can put any random javascript, ajax, form submission etc. That will actually do something with the rating data once the user selects a rating.

Here is a working version:

Rate Me... Rating Saved!

COMMENTS:





really very nice. Easy to implement....Thanks dear.
samantak at Apr 21st - 11:10am
Awesome. Thanks a lot
Sian at Apr 16th - 5:51am
good code dear
prakash at Apr 14th - 6:24am
I need to put many on the same page!But nots work!?
I need to put many on the same page! at Apr 6th - 9:05pm
ITS WHAT I WANT THANKS VERY MUCH
THAKS I LOVE YOU at Apr 6th - 7:23pm
Incredble
Bka Bla Bka at Apr 6th - 6:45pm
Grate.... Nice one.. Its really helpful
chirag shah at Mar 8th - 3:25am
Nice
assa at Mar 6th - 5:23am
Nice one!
Phil at Mar 4th - 10:44am
great
amerexonline.com at Mar 3rd - 11:35pm
great!!!!!!!! thanks~!
nn at Feb 12th - 2:07pm
pretty good
tran at Feb 3rd - 5:41pm
awesome
krasna at Feb 3rd - 5:39pm
just awesome
shanker at Dec 13th - 4:28am
I'll post a new version soon.
Addam at Dec 3rd - 12:24am
Actually, you can create as many as you want on the same page. Visually it will work, but you would have to do some ID checking in the sendRate() function. Make sure the sections don't have the same IDs and check it on the way to send and you should be fine.
Addam at Dec 3rd - 12:24am
OK, the hidden thing is working, I didn't realize it didn't change the output HTML. Addam, great script. Are there any versions that support multiple instances in one page? Thanks!
Chris at Nov 29th - 3:32pm
looks good, but i'm struggling with an implementation. i'd like to write the selected rating to a hidden variable in the overall form. i.e. document.forms[1].hiddenInput.value = 'The new value'; but nothing seems to work. any suggestions? thanks!
Chris at Nov 29th - 10:50am
Awesome - really simple and short - the other codes i've looked at are HUGE :)
Thanks man.....
Gublooo at Oct 29th - 7:44pm
gud 1
nagi at Oct 18th - 1:15pm
awsome!
andre at Oct 10th - 3:57am
neat
keith at Sep 24th - 7:12pm
The operator of this page is freakin awesome and hot!
Sheena at Sep 22nd - 9:33pm