You are free to browse all of the content on this site, however if you want to post comments or replies you will need to register for a free account. Becoming a registered member also disables some of the more annoying ads whilst you are logged in.

jQuery: Star rating form element

I recently had the need to create a new form element to allow users the ability to select a rating out of 5 for various categories as part of a standard form. There are various ways in which this could be done - radio boxes, select box or a simple text input but my client was fairly set on having a star rating widget. Having looked around on the internet for something to use for this, all I could find was star rating widgets designed to act on their own and not as part of a form. Additionally, none of the solutions would work if javascript was disabled, this left me needing to create on of my own, which I thought I'd share.

What is a star rating form element?
My specification for designing this element was as follows:

The element should display a number of graphical stars.

When a user clicks on a star, the clicked star and all stars to its left should light up.

The element should submit as its value a numeric representing the number of selected stars.

The element should only submit its value along with the rest of the form.

It should still be usable as a form element should the user have javascript disabled.

01: Html Version

My first step at building this was to take an element that was similar to what I wanted to do to create a starting point from which to build the element. It would also serve as a useful fallback in case the user has javascript disabled. The closest html form element to what I wanted to do was the radio box, a number of radio elements with the same name but different values could be placed on the page to allow the user to select a number between 1 and 5. The code for this is below.

The next stage in building this element is to decide how the javascript will be used when someone wants to turn plain boring radio boxes into a star rating element. The javascript below shows a sample of how the plugin might be called.

If you were to try out the code we have so far, it would create a nice looking set of five stars, however nothing happens when they are clicked on. What we now need to do is to add an event handler to the elements so that when a user clicks on a star it fills in the stars to its left. As we have used radio buttons for the base element and the image forms part of the label the users browser will take care of updating the value of the element for us, all that is left for us to do is update the user interface.

All this code does is bind a function to the change event of all the radios which changes the image associated with each based on their values. The last line triggers a change event on the currently selected element to ensure it displays correctly at the start.06: Putting it all together

The element is now complete, I have added the complete code for the plugin below. For a quick demo you can view it in action here.