starmark | : octocat : Turn your GitHub stars into Chrome bookmarks | Browser Plugin library

While elements can send data in a form, elements cannot. Now you are using a function in JavaScript to simulate this kind of behavior by trying to get the value from the hovered or clicked span. The sessionStorage.starRating = count should be sessionStorage.setItem('starRating', count) to store the value into the session storage. But that's not the culprit.

Instead of using elements, use elements to indicate the rating the user gives. While styling may look difficult, it can be fairly easy by using the element as the styling point. When you connect the with the for attribute to the id of the element it belongs to, it becomes clickable. Meaning that whenever I click the label, the input will be clicked as well and will therefor be selected.

So you hide the input and style the label. And in CSS you say how the clicked label is supposed to look based on the currently selected input. The :checked psuedo selector is a real lifesaver here.

Putting this all together in your form makes the currently selected radio button to be send to the server with the proper name and value pair without having to do any JavaScript.

Check out the snippet below to see it work. The JavaScript part can be ignored as it is merely a demonstration.