Javascript - How to get the value back on a Click function

Question

Thanks by advance for the help.
I'm not really friendly with Javascript...

I've got a five stars review system and I'm trying to get the value of the rating (on a scale of 1 to 5) and push it in a hidden input for a form.

Any informations on "How to get the value on the 'XXXXX' space" will be appreciated.

Thanks :)

Here's the code :)

 var rating = { init: function() { var ratingWidth = $('.rating-select span').width(); var step = ratingWidth / 5; $('.rating-select').mousemove(function(e) { var x = e.pageX - $(this).offset().left; x = Math.ceil(x / step) * step; $('.rating-select span span').width(x); $(this).data('rating', x/step); }); $('.rating-select').mouseleave(function(e) { var newWidth = $(this).find('select').val(); $('.rating-select span span').width(newWidth*step); }); $('.rating-select').click(function(e) { e.preventDefault(); $(this).find('select').val($(this).data('rating')); document.getElementById("hiddenForm").value = /* VALUE */; }); } }; 

 .rating { color: #ca293e; margin-bottom: 10px; letter-spacing: 5px; } .rating.rating-select { cursor: pointer; } .rating > span { position: relative; overflow: hidden; } .rating > span:before { content: "\\f006\\f006\\f006\\f006\\f006"; font-family: 'fontAwesome' !important; margin-right: -5px; } .rating > span span { position: absolute; left: 0; top: 0; height: 100%; line-height: 25px; } .rating > span span:after { content: "\\f005\\f005\\f005\\f005\\f005"; position: absolute; top: -3px; left: 0; font-family: 'fontAwesome' !important; width: 100%; margin-right: -5px; overflow: hidden; white-space: nowrap; } 

 <div class="rating rating-select"> <span><span></span></span> <select> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> 

Thansk for help :)

Answer 1

Try out the jQuery Raty plugin, it's made for this and it's really easy to use.

With this you can get your score this way:

<div id="raty1"></div>

<script>
$('#raty1').raty({
   click: function(score, evt) {
     alert('ID: '+this.id+' Score: '+score);
   }
});
</script>