Deseo incorporación en mi página web una página para poder opinar (valoración) sobre una reserva.
Quiero que las valoraciones vayan del 1(mínimo) al 5(máximo).
Código PHP:
//Si pulsamos el link "Nueva opinión"...
if(isset($_GET["nueva"])){
//Llamamos al método "obtenerReservasPorCliente" y le pasamos el parámetro del email del cliente.
$reservas = BD::obtenerReservasPorCliente("[email protected]");
echo "<form action='menu_cliente.php?nueva=1' name='form_add_opinion' id='form_add_opinion' method='POST'>";
$selected = true;
foreach ($reservas as $reserva){
$idreserva = $reserva["idreserva"];
$idcabana = $reserva["idcabana"];
$idemail = $reserva["idemail"];
$check_in = new DateTime($reserva["check_in"]);
$check_out = new DateTime($reserva["check_out"]);
$reserva_toString = "Reserva de la cabaña ".$idcabana. " | ".$idemail. " | ".$check_in->format('d/m/Y'). " | ".$check_out->format('d/m/Y')."<br/><br/>";
echo "<input type='radio' name='a_anadir' value='".$reserva["idreserva"]."' ".($selected?"checked":"").">".$reserva_toString."</input>";
$selected = false;
}
echo "<br/>Deja tu opinión: <br/>";
echo "<textarea rows='4' cols='56' id='texto_opinion' name='texto_opinion'></textarea><br/>";
echo "<input type='submit' value='Añadir opinion' name='add_opinion' id='add_opinion'>";
echo "</form>";
}
Quisiera que salgan dibujitos de estrellitas y automáticamente si pasas el ratón por encima se autorellenen de color amarillo y al hacer click se mantenga ese número de estrellas y se guarde el valor (1.2.3.4.5) en una $variable.
Sin tanto diseño podría ser algo similar a:
<div class="valoracion">
<input id="radio1" type="radio" name="estrellas" value="5"><!--
--><label for="radio1">★</label><!--
--><input id="radio2" type="radio" name="estrellas" value="4"><!--
--><label for="radio2">★</label><!--
--><input id="radio3" type="radio" name="estrellas" value="3"><!--
--><label for="radio3">★</label><!--
--><input id="radio4" type="radio" name="estrellas" value="2"><!--
--><label for="radio4">★</label><!--
--><input id="radio5" type="radio" name="estrellas" value="1"><!--
--><label for="radio5">★</label>
</div>
Código:
.valoracion {
position: relative;
overflow: hidden;
display: inline-block;
}
.valoracion input {
position: absolute;
top: -100px;
}
.valoracion label {
float: right;
color: #c1b8b8;
font-size: 30px;
}
.valoracion label:hover,
.valoracion label:hover ~ label,
.valoracion input:checked ~ label {
color: #ffff00;
}
Siempre se completa una estrella de menos. ¿Por qué?