I was able to do the star rating system, but I wanted the vote to be displayed on the screen or saved in the star so that it would be filled according to the votes. Could someone help me, here is my code:
This is the page where the stars are:
<script>
$(document).ready(function () {
$(".vote #stars").click(function () {
$.post('rating.php',{rate:$(this).val()},function(d){
if(d>0)
{
alert('Seu voto Ja foi confirmado');
}else{
alert('Obrigado por Votar');
}
});
$(this).attr("checked");
});
});
</script>
<div class="vote">
<label>
<input id="stars" type="radio" name="fb" value="1" />
<i class="fa" id="fa"></i>
</label>
<label>
<input id="stars" type="radio" name="fb" value="2" />
<i class="fa" id="fa"></i>
</label>
<label>
<input id="stars" type="radio" name="fb" value="3" />
<i class="fa" id="fa"></i>
</label>
<label>
<input id="stars" type="radio" name="fb" value="4" />
<i class="fa" id="fa"></i>
</label>
<label>
<input id="stars" type="radio" name="fb" value="5" />
<i class="fa" id="fa"></i>
</label>
</div>
Here is the script for hover
in stars and to mark them as actives
:
$('.vote label i.fa').on('click mouseover',function(){
// remove classe ativa de todas as estrelas
$('.vote label i.fa').removeClass('active');
// pegar o valor do input da estrela clicada
var val = $(this).prev('input').val();
//percorrer todas as estrelas
$('.vote label i.fa').each(function(){
/* checar de o valor clicado é menor ou igual do input atual
* se sim, adicionar classe active
*/
var $input = $(this).prev('input');
if($input.val() <= val){
$(this).addClass('active');
}
});
$("#voto").html(val); // somente para teste
});
//Ao sair da div vote
$('.vote').mouseleave(function(){
//pegar o valor clicado
var val = $(this).find('input:checked').val();
//se nenhum foi clicado remover classe de todos
if(val == undefined ){
$('.vote label i.fa').removeClass('active');
} else {
//percorrer todas as estrelas
$('.vote label i.fa').each(function(){
/* Testar o input atual do laço com o valor clicado
* se maior, remover classe, senão adicionar classe
*/
var $input = $(this).prev('input');
if($input.val() > val){
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
}
$("#voto").html(val); // somente para teste
});
And this is the PHP rating page. I wanted the user to vote more than once, but I can not. Note: This part of the bank in PHP I did following an English tutorial and I'm trying to make it not block the vote for only one person.
<?php
$ipaddress = md5($_SERVER['REMOTE_ADDR']); // here I am taking IP as UniqueID but you can have user_id from Database or SESSION
$servername = "localhost"; // Server details
$username = "root";
$password = "";
$dbname = "filmes";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Unable to connect Server: " . $conn->connect_error);
}
if (isset($_POST['rate']) && !empty($_POST['rate'])) {
$rate = $conn->real_escape_string($_POST['rate']);
// check if user has already rated
$sql = "SELECT 'id' FROM 'tbl_rating' WHERE 'user_id'='" . $ipaddress . "'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
if ($result->num_rows > 0) {
echo $row['id'];
} else {
$sql = "INSERT INTO 'tbl_rating' ( 'rate', 'user_id') VALUES ('" . $rate . "', '" . $ipaddress . "'); ";
if (mysqli_query($conn, $sql)) {
echo "0";
}
}
}
$conn->close();
?>