I'm trying to make a star rating system, i have this code and i want to make some changes on it, after the user clicks on the stars it shows an alert with how many stars and it resets the colors, what i want is the color filling to stay after the user clicks on it, and replace the alert with a div under the stars, here is my code:
Js:
$(function() {
$("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) {
// remove all active classes first, needed if user clicks multiple times
$(this).closest('div').find('.active').removeClass('active');
$(e.target).parentsUntil("div").addClass('active'); // all elements up from the clicked one excluding self
$(e.target).addClass('active'); // the element user has clicked on
var numStars = $(e.target).parentsUntil("div").length+1;
$('.show-result').text(numStars + (numStars == 1 ? " star" : " stars!"));
});
});
CSS:
.show-result {
margin: 10px;
padding: 10px;
color: green;
font-size: 20px;
}
.star-rating s:hover,
.star-rating s.active {
color: red;
}
.star-rating-rtl s:hover,
.star-rating-rtl s.active {
color: red;
}
.star-rating s,
.star-rating-rtl s {
color: black;
font-size: 50px;
cursor: default;
text-decoration: none;
line-height: 50px;
}
.star-rating {
padding: 2px;
}
.star-rating-rtl {
background: #555;
display: inline-block;
border: 2px solid #444;
}
.star-rating-rtl s {
color: yellow;
}
.star-rating s:hover:before,
.star-rating s.rated:before,
.star-rating s.active:before {
content: "\2605";
}
.star-rating s:before {
content: "\2606";
}
.star-rating-rtl s:hover:after,
.star-rating-rtl s.rated:after,
.star-rating-rtl s.active:after {
content: "\2605";
}
.star-rating-rtl s:after {
content: "\2606";
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>
<div class="show-result">No stars selected yet.</div>
here value can display but how to store this value in mysql.
To store the star ratings in database, you should use Ajax. The code below shows using Jquery Ajax post to post values to a server side script (PHP).
on your
saveRatings.php
file,