Star Rating in a Form

A few days ago, I needed a 5-star rating as a field in a form.

There were several options to choose from. A dropdown could be used. Or radio buttons. Or even a slider (input field type="range"). A quick search yielded more ways to do it.

What I wanted was a 5-star display to tap on for a one-tap selection — with hollow stars and filled stars to show the rating. And I wanted something to tap on to clear the rating.

I ended up making my own. The code comes with this article.

Instead of images, I decided to use text characters formed with HTML character entities.

• × (×) became the clear-the-rating character to tap on.

• ★ (★) became the filled star.

• ☆ (☆) became the hollow star.

Here is an illustration of the form field.

When a star (or ×) is tapped, JavaScript adjusts the star characters accordingly and a hidden form field records what was tapped. The hidden field's value will be a digit between 0 and 5, inclusive.

Note: The hidden field value statement between parenthesis at the above demonstration is not part of the form field. The statement is there for convenience so you can see what value the hidden field would have.

Here is the source code.

<input id="current-star-rating" type="hidden" name="rating" value="0">

<p>
Rating: <span style="font-size:1.5rem; white-space:nowrap;">
<span onclick="AdjustRating(this)" style="display:inline; cursor:pointer; color:hsl(5,91%,74%);">&times;</span> 
<span id="star1open" onclick="AdjustRating(this)" style="display:inline; cursor:pointer; color:hsl(48,99%,48%);">&star;</span> 
<span id="star1full" onclick="AdjustRating(this)" style="display:none;   cursor:pointer; color:hsl(48,99%,48%);">&starf;</span> 
<span id="star2open" onclick="AdjustRating(this)" style="display:inline; cursor:pointer; color:hsl(48,99%,48%);">&star;</span> 
<span id="star2full" onclick="AdjustRating(this)" style="display:none;   cursor:pointer; color:hsl(48,99%,48%);">&starf;</span> 
<span id="star3open" onclick="AdjustRating(this)" style="display:inline; cursor:pointer; color:hsl(48,99%,48%);">&star;</span> 
<span id="star3full" onclick="AdjustRating(this)" style="display:none;   cursor:pointer; color:hsl(48,99%,48%);">&starf;</span> 
<span id="star4open" onclick="AdjustRating(this)" style="display:inline; cursor:pointer; color:hsl(48,99%,48%);">&star;</span> 
<span id="star4full" onclick="AdjustRating(this)" style="display:none;   cursor:pointer; color:hsl(48,99%,48%);">&starf;</span> 
<span id="star5open" onclick="AdjustRating(this)" style="display:inline; cursor:pointer; color:hsl(48,99%,48%);">&star;</span> 
<span id="star5full" onclick="AdjustRating(this)" style="display:none;   cursor:pointer; color:hsl(48,99%,48%);">&starf;</span> 
</span>
</p>

<script type="text/javascript">
function AdjustRating(d)
{
   for( var i=1; i<=5; i++ )
   {
      document.getElementById("star"+i+"open").style.display="inline";
      document.getElementById("star"+i+"full").style.display="none";
   }
   var starnum = "0";
   switch(d.id)
   {
      case "star1open" : case "star1full" : starnum = "1"; break;
      case "star2open" : case "star2full" : starnum = "2"; break;
      case "star3open" : case "star3full" : starnum = "3"; break;
      case "star4open" : case "star4full" : starnum = "4"; break;
      case "star5open" : case "star5full" : starnum = "5"; break;
   }
   document.getElementById("current-star-rating").value = starnum;
   for( var i=1; i<=starnum; i++ )
   {
      document.getElementById("star"+i+"open").style.display="none";
      document.getElementById("star"+i+"full").style.display="inline";
   }
}
</script>

The source code is pretty much copy and paste. Customize as you wish, of course.

One customization you might want to do is change the hidden field's name. If your form processing software or confirmation page needs a name other than "rating", then the hidden field's name needs to be changed. You'll find the hidden field with name="rating" on the first line of the source code.

To temporarily see the value of the hidden field for testing, type="hidden" may be changed to type="text".

If you change any of the id values, the corresponding id values and references in the JavaScript must also be changed. Nine lines in the JavaScript refer to id values in the HTML code.

The above source code will work as a demonstration when copied and pasted into a temporary web page. For a live form, the name="rating" hidden field name probably will need to be changed.

For me, the solution is perfect (assuming "perfect" means "exactly the way I want it"). It might also be perfect for you.

(This content first appeared in Possibilities newsletter.)

Will Bontrager