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!


Share

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{float:left; clear:both; width:100%; height:auto; 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:





Very nice!
Slym at Jun 28th - 4:14pm
for some reason only my stars will show up and when i mouse over it wont work or when i click
pay at Jun 26th - 11:18am
q
q at Jun 5th - 8:50am
Hi,
The code very helpful and nice but can anyboby help me to save the record(ratings) in an oracle table
Thanks
Saam
surisai1@yaoomail.com
Saam at Jun 1st - 4:33am
very excellent
ravesh kumar at May 29th - 12:15pm
some help me hhow to save the records in the oracle database depending on the user clicks on the document link...
Please do reply on my mailid surajsg1@gmail.com
Harry at May 28th - 8:37am
Sorry the id is search.gs@gmail.com
Suraj at May 27th - 9:27am
Hi Addam, if you send me ur mail id it will be much better my id is sezrch.gs@gmail.com am facing bit problem regarding the code
Suraj at May 27th - 9:26am
a
a at May 27th - 9:23am
`
` at May 27th - 8:53am
Hi Addam,
Really thanks a lot for replying as you said i changed the width size css but still its the same story 3 stars are on top and rest 2 stars are below please help me where am going wrong and how we can track the ranking in the databse depending upon the user for perticular document...
Regards,
Suri
Suri at May 27th - 8:08am
Hi Suri...

Adjust the width of the rate me css... all of the visual is pure css.

Hope this helps!

~Addam~
Addam at May 19th - 5:14pm
Hi Addam,
Really thanks for responding but in my case star images are displayed like this how to bring it one line i.e
* * *
* *
the first 3 star comes in one line and the 2 in other line hows that am not getting.

Can u plz help me...

Regards,
Suri
Suri at May 15th - 5:03am
nice one
raju at May 6th - 2:00am
Hi Fabris...

You would have to modify the underlying script. Originally when I wrote this, I didn't expand it for multiples. It's in the works though. Someone else asked for that not too long ago. See the comments below.

thanks!
Addam at Apr 22nd - 11:57am
just a question... how can I do if I need to rate two or more items on the same page?
Fabris at Apr 22nd - 8:54am
Very good!! Now I must fit on a php rating system... Thanks for the helpful script ;)
Fabris at Apr 21st - 10:17am
nice one...
honey22 at Apr 21st - 1:15am
Hi Suri. You can place the image anywhere you like. After looking at what you pasted, it should actually look like this:

#rateMe .on{background-image: url(../images/star_on.gif); width:12px;height:12px;}

Take out the no-repeat; It's not valid in the way it was presented and might cause the image not to render.

Hope this helps!
Addam at Apr 15th - 3:15pm
Am getting the image problem
its not displayed where am going wrong can any one help me please
#rateMe .on{background-image: url(../images/star_on.gif); no-repeat;width:12px;height:12px;}
and exactly where we should place this star_on.gif image.. if any solution mail me to my id surajsg1@gmail.com will be glad and thanks in advance...
suri at Apr 10th - 10:19am
its realy a good one thanx frnz
suvajit at Apr 2nd - 1:52pm
Thanks alot for sharing this

:0)
morehawes at Mar 19th - 7:35am
It is not working with ie6..can anyone help
pooja at Mar 9th - 2:29am
hallo
dschischi at Mar 8th - 7:03pm
It is very useful..Thank You
Vaishnavi at Mar 5th - 4:04am
There is no way to know the saved Rating.
Pradeep Khemnani at Mar 3rd - 4:14am
There is no way to know the saved Rating.
Pradeep Khemnani at Mar 3rd - 4:14am
hey NICE!!!!!!!!!!!

vinay at Feb 20th - 3:17am
dsfdsfdsfsd
hemantq at Feb 20th - 3:17am
out standing
hemant Kumar Singh at Feb 19th - 4:58am
Do you mean maintain the state of the rating when a user refreshes the window or goes to another page and comes back? It's out of the scope of this script, but I'll make note for the next version. It will be much lighter.
Addam at Feb 11th - 7:06pm
Hey guys, the rating is reset when postback..how can i maintain the state of the rating?
trebor at Feb 9th - 11:36pm
Code is quite helpful...
Its working fine...
Neeraj at Feb 5th - 3:23am
shit
Bob at Jan 18th - 10:36pm
fantastico!
Prova at Jan 18th - 12:44pm
Hi, Nice script
Swathi Muddineni at Dec 16th - 12:51am
I am wanting to develope something that would save the results of multiple peoples ratings.

I have two websites that are in need of ratings:
http://www.exema.com
http://www.reviewmoneymakingwebsites.com


Rhys at Nov 12th - 1:42pm
Hi, nice script but i have some problems in IE7 :

num is undefined;

stars not filled with color


Firefox,Opera OK.

roman.potter@gmail.com at Nov 6th - 11:43am
the image background:url(star_off.gif) is not working I have the image in web root still it does not appear i use IE
nayanapb@hotmail.com at Oct 29th - 3:47pm
How to reset the Rating?(using Reset button)
Kamalkanth at Oct 24th - 3:56am
In ratingsys.js: Which is the utility of 'var hover' in the program and 'var a' in rating function?

(forgive me possible misspelling and syntax)
Yasim Zeballos at Oct 13th - 9:59pm
Hello, I need multiple rating options on same page and also i need to display saved data
Manjeet - j.manjeet@cssaglobal.com at Oct 10th - 8:44am
Has anyone got any sendRate() code that will give you the rating in an email?
Carol at Aug 7th - 5:50am
Thx so much for this! I'm making a website using the weebly host, but I'm not a softfoot, I html and javascript!
http://skadelynxgallery.weebly.com
Skadelynx at Jul 28th - 11:59am
hi
rey at Jul 25th - 5:41am
your so cool men
rey lester at Jul 24th - 4:16am
I get this message though: document.getElementById(...) is null of void. I don't know JS well.
Krasna at Jun 29th - 12:50pm
HA! sorry about that everyone. It had been fixed in IE (simple css fix).
Addam at Jun 17th - 5:16pm
Dosen't render properly in IE7... 2 stars are off to the left
Dan at Jun 16th - 9:17pm
Thanks..:) That was useful
Vinitha at Jun 6th - 7:39am
css textboxt input (textfield) style - examples - -
http://www.css-lessons.ucoz.com/textbox-css-examples.htm
chester at May 24th - 12:22pm
Best one I've seen yet.

Thanks.
Simon at May 15th - 11:36pm
Thanks for sharing.
phine at May 14th - 11:48am
I got this to work per your scripts. Which is great. But, I am sort of lost to what I need to do to display the result that is already saved.
mabed at May 13th - 5:08pm
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