Need Help with jQuery Star-Rating System plugin
Hello Again Everyone,
I am attempting to use this plugin jQuery Star Rating Plugin 3.14 Test #4. I have manage to successfully display the stars for voting on my page, but what i would now like to do is display each star-rating (ex. comment 1 vote : 3.5, comment 2 vote: 4, comment 3 vote: 1.5) and star-rating average (ex. total vote average: 3.8 ) from all three star-ratings.
The plugin has a submit button that displays each star-rating however I want it to display simultaneously after each star-rating along with an average for each star rating without the need to click the submit button...
I have been working all this problem for a little over a day now so any suggestions or help of any kind I thank you.
HTML code:
Code:
<section>
<article id="comment">
<form id="form4">
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star1" title="Worst"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star2" title="Worst"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star3" title="Bad"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star4" title="Bad"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star5" title="OK"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star6" title="OK"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star7" title="Good"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star8" title="Good"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star9" title="Best"/>
<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star10" title="Best"/>
</form>
<time datetime="2011-16-11T23:31:45+01:00"> December 16, 2011 </time>
<br><br>
<h3>Best restaurant ever!</h3>
<p class="comment">Food is amazing, staff is very friendly.</p>
<span class="dash">-</span> <a class="qa" href="#">qa</a>
</article>
</section>
<section>
<article id="comment">
<form id="form4">
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star1" title="Worst"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star2" title="Worst"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star3" title="Bad"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star4" title="Bad"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star5" title="OK"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star6" title="OK"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star7" title="Good"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star8" title="Good"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star9" title="Best"/>
<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star10" title="Best"/>
</form>
<time datetime="2012-15-11T23:31:45+01:00"> December 15, 2011 </time>
<br><br>
<h3>Pretty good food</h3>
<p class="comment">Nice atmosphere</p>
<span class="dash">-</span> <a class="qa" href="#">qa</a>
</article>
</section>
<section>
<article id="comment">
<form id="form4">
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star1" title="Worst"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star2" title="Worst"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star3" title="Bad"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star4" title="Bad"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star5" title="OK"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star6" title="OK"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star7" title="Good"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star8" title="Good"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star9" title="Best"/>
<input class="star {split:2}" type="radio" name="test-3-rating-3" value="star10" title="Best"/>
</form>
<time datetime="2011-14-11T23:31:45+01:00"> December 14, 2011 </time>
<br><br>
<h3>Don't go here</h3>
<p class="comment">They put sardines in the pasta!</p>
<span class="dash">-</span> <a class="qa" href="#">qa</a>
</article>
</section>
<!-- area to be populated with resolutes -->
<div id="mainContent"> <!-- mainContent begin-->
<h2 class="left">3 Customer Reviews</h2>
<input type="submit" value="Submit scores!" /> </td>
<u>Test results</u>:<br/><br/>
<div class="test Smaller">
<span style="color:#FF0000">Results will be displayed here</span>
</div>
</td>
</div>
jQuery Script (not working):
Code:
$(function(){
$('.test',this).html('');
$('input',this).each(function(){
if(this.checked) $('.test',#form4).append(''+this.name+': '+this.value+'<br/>');
});
});
