Star Rating Plugin for jQuery
What
An easy to use rating control. It takes a normal select box, and turns it into a rating that your users can click on. The select box is preserved so you can still bind on change, get, and set the value in the rating control. The image is controlled with CSS and a simple gif, so you can make it look like anything you need.
Download
Download (Moved to GitHub)
Download
Example
Here is a sample default rating control with no options.
Source
<select class="rating">
<option value="0">Did not like</option>
<option value="1">Ok</option>
<option value="2" selected="selected">Liked</option>
<option value="3">Loved!</option>
</select>
$(".rating").rating();
That’s it!
The select box is now replaced with the rating control. Each option you put in the select box is turned into a star, so you can easily have as many stars as you want. The value you set is the value that is returned for the selected star. The text becomes the title on the star.
You can turn the cancel button on and off, and change the value of the cancel button by passing it when you create the rating control.
$(".rating").rating({showCancel: true, cancelValue: null,})
You can make the control readonly by setting <select disabled="disabled">
Available Options:
showCancel: true: Should the cancel button be shown?cancelValue: null: If cancel button is shown, what should it’s value be?startValue: null: If no property has the ‘selected’ attribute, what value should be displayed?
Get Value
Click for Value
Source
<select name="myRating" class="rating" id="serialStar">
<option value="0">Did not like</option>
<option value="1">Ok</option>
<option value="2">Liked</option>
<option value="3">Loved!</option>
</select>
<span id="seralString">Click for Value</span>
<button onclick="$('#seralString').text( $('#serialStar').val() );">Serialize</button>
//Turn the Select into a rating
$(".rating").rating();
//Action on button click
$('#seralString').text( $('#serialStar').val() );
Bind $.serialize() On Change
Of course you don’t have to call $.serialize() here, you can call anything you want. It’s just a normal event. You even have access to the value with $("#serialStar2").val()!
Just click and I’ll change.
Source
<select name="myRating" class="rating" id="serialStar2">
<option value="1">ALrighte</option>
<option value="2">Ok</option>
<option value="3">Getting Better</option>
<option value="4">Pretty Good</option>
<option value="5">Awesome</option>
</select>
<span id="serialString2">serialize that star rating!</span>
//Turn the select box into rating controls
$(".rating").rating();
//Show that we can bind on the select box
$("#serialStar2").bind("change", function(){
$('#serialString2').text( $('#serialStar2').serialize() );
});
Setting the Value
There is one slight twist. In order to set the value programmatically, you have to set it, then trigger the change event on the select box.
<select name="myRating" class="rating" id="serialStar2">
<option value="1">ALrighte</option>
<option value="2">Ok</option>
<option value="3">Getting Better</option>
<option value="4">Pretty Good</option>
<option value="5">Awesome</option>
</select>
<button onclick="$('#star3').val(4).change()">Set to 'Pretty Good'</button>
//Turn the select box into rating controls
$(".rating").rating();
//Set the value to 4, then trigger change to update the rating.
$('#star3').val(4).change();
Bugfixes
IE Loading ProblemsIE CSS Hover Over shows the wrong image
Todo
Allow disabling of the control- Allow global settings
Way to set the value without firing the change eventIf no selected attribute is present, start with all stars blank
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
wordpress themes at the lowest prices…
[...]Star Rating Plugin for jQuery | Write or Program[...]…
輪圈…
[...]Star Rating Plugin for jQuery | Write or Program[...]…
schoonheidssalon leeuwarden…
[...]Star Rating Plugin for jQuery | Write or Program[...]…
Normally I do not read article on blogs, however I wish to say that this write-up very forced me to check out and do it! Your writing style has been amazed me. Thanks, quite great post.
code de la route gratuit…
[...]Star Rating Plugin for jQuery | Write or Program[...]…
Downloaded the source code from Github, but setting the value does not work in the sample. Gives an error: Uncaught ReferenceError: isDirty is not defined. Is there a fix for this?
Good day very nice website!! Guy .. Beautiful .. Wonderful .. I’ll bookmark your blog and take the feeds additionally?I’m glad to find a lot of helpful info right here in the post, we want develop extra techniques on this regard, thanks for sharing. . . . . .
Hi, great plugin but could you please help me with something? I’ve read through the comments and believe this has been answered before, but i’m not sure i’m making the right changes – javascript is like greek to me, am more comfortable with PHP.
Anyway, I need to have a ’0′ result if the form is submitted with no stars selected. I’ve tried adding an extra blank option in the , but this just adds an extra star again with the value of selected or unselected.
I have the 21/09/2011 updated version – i’ve set the startValue to zero but no difference. Also tried adding the “selected” attribute to the option tag, but no difference – in any browser.
thanks again,
Hi i have the question how to save rating data and stay on it ?
cuz when i refresh page the ratings when i selected on click is canel itself.
@Sampat comment those 2 lines … works fine
Hi there,
If you have (for example) list of 20 cars on page, with different car rating (number 0-10), how to show star instead of number for every car rating, without having to call javaScript function for 20 times?
Using some jQuery (or JavaScript) onload to change every element with class=”star” (${rating}) will be ideal.
Thanks
@Moco
If you have several select items all with the same class, you can convert them all with:
$('.myClassName').rating();
Fantastic beat ! I would like to apprentice at the same time as you amend your web site, how can i subscribe for a blog web site? The account aided me a appropriate deal. I were a little bit familiar of this your broadcast provided bright clear idea
i cannot get the disabled to work, it seems to be completely ignored.
is this a known issue?
regards
miles
Hello there, You’ve done a fantastic job. I will definitely digg it and in my view suggest to my friends. I’m sure they’ll be benefited from this web site.
You just save my day ! Amazing work ! Keep it up !! & thanks very much ! You know I browsed many website but didn’t find like dis one.. Cool !
hello its not working i have try and following code.only show the select box for my website
$(document).ready(function(){
//Turn all the select boxes into rating controls
$(“.rating”).rating();
//Show that we can bind on the select box
$(“#serialStar2″).bind(“change”, function(){
$(‘#serialString2′).text( $(‘#serialStar2′).serialize() );
});
$(“#serialStar”).rating();
});
ALrighte
Ok
Getting Better
Pretty Good
Awesome
serialize that star rating!
SetValue doesn’t work, ‘$(xxx).val(0).change();’ doesn’t work, either. Other than that, a pretty decent plugin.
[...] am trying to use the Chris Richards jQuery rating and I have found it very useful and simple to use, but I need to have half ratings as well which [...]
This has been asked earlier in this post, but no one answered…where is the code that actually saves each star rating?, this way you can see what it is when your re-fresh your browser?
Right now when you re-fresh the stars (in any browser), it does not show any star selections.
Thanks
You’ll have to have something on the backend to persist the values. You can get the current selection with a normal jQuery .val() Just send that value with a ajax request to your server.
Example:
$(“#star”).val()
With havin so much content do you ever run into any problems
of plagorism or copyright infringement? My blog has a
lot of unique content I’ve either created myself or outsourced but it looks like a lot of it is popping it up all over the internet without my permission. Do you know any methods to help protect against content from being stolen? I’d definitely appreciate it.
Finally i found what i want. Thanks
I am now not certain the place you are getting your information, but great topic. I needs to spend a while studying much more or figuring out more. Thank you for magnificent information I was on the lookout for this information for my mission.
Bonjour à tous,
I recently just like the important details you actually offer for the posts. I will bookmark your web site as well as check once more listed here regularly. I will be somewhat sure I will be taught many brand new goods appropriate the following! Best of luck for the following!