I am working with the Couchcms v2.3 to create the directory website and recently I was trying to implement the star rating system to the page but I was unable to get the 5 star rating work properly. I am only able to rate upto 1 to 4 stars but when I click on the 5 stars nothing happens. Please help me to make it work properly or share your code that works properly. Thanks in advance.
Here is my code.
`
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Rate' order='50000' hidden='1'>
<cms:editable type='vote_stars' search_type='decimal' name='my_stars' />
</cms:template>
<!DOCTYPE html>
<html>
<head>
<title>Star Rate</title>
<style>
.rating {
float:left;
}
/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t
follow these rules. Every browser that supports :checked also supports :not(), so
it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
position:absolute;
top:-9999px;
clip:rect(0,0,0,0);
}
.rating:not(:checked) > label {
float:right;
width:1em;
/* padding:0 .1em; */
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:300%;
/* line-height:1.2; */
color:#ddd;
}
.rating:not(:checked) > label:before {
content: '★ ';
}
.rating > input:checked ~ label {
color: dodgerblue;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: dodgerblue;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: dodgerblue;
}
.rating > label:active {
position:relative;
top:2px;
left:2px;
}
</style>
</head>
<body>
<cms:form masterpage=k_template_name mode='edit' page_id=k_page_id anchor='0' method='post'>
<cms:if k_success>
<cms:db_persist_form my_stars=frm_stars />
<cms:redirect k_page_link />
</cms:if>
<div class="rating">
<cms:input type='radio' name="stars" opt_values='5 | 4 | 3 | 2 | 1' />
<input type="submit" name="submit" value="" />
</div>
</cms:form>
<br>
<cms:show_votes 'my_stars'>
<br>
<p>
<cms:dump />
</p>
</cms:show_votes>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('input[type=radio]').hide();
$(document).ready(function() {
// make following action fire when radio button changes
$('input[type=radio]').change(function() {
// find the submit button and click it on the previous action
$('input[type=submit]').click()
});
});
</script>
</html>
<?php COUCH::invoke(); ?>
`
>Solution :
The script does not fire the change event, because the fith option is already rendered as checked="checked". One way to fix that would be to amend the editable definition as follows
<cms:input type='radio' name="stars" opt_values='5 | 4 | 3 | 2 | 1' opt_selected='-'/>
An impossible value for the opt_selected parameter allows to render the field unchecked completely.
Alternative way would be to fix the script by using another event, e.g. click
$('input[type=radio]').click(function() {