fix rating form item

src/modules/form/assets/css/form.css

@@ -127,6 +127,7 @@ display: none;
 
 .form-item-rating{
     border: unset;
+    background-color: unset;
 }
 
 .stars-rating {
@@ -147,22 +148,18 @@ display: none;
     cursor: pointer;
     color: #ccc;
     transition: color 0.2s;
-    font-size: 30px;
-  }
-
-  /* Fill the stars on hover */
-  .stars-rating label:hover,
-  .stars-rating label:hover ~ label {
+}
+
+.stars-rating label:hover,
+.stars-rating label:hover ~ label {
     color: #f5b301;
-  }
-
-  /* Fill the stars on selection */
-  .stars-rating input:checked ~ label {
+}
+
+.stars-rating input:checked ~ label {
     color: #f5b301;
-  }
-
-  /* Ensure all previous stars are filled when a star is selected */
-  .stars-rating input:checked ~ label,
-  .stars-rating input:checked ~ label ~ label {
+}
+
+.stars-rating input:checked ~ label,
+.stars-rating input:checked ~ label ~ label {
     color: #f5b301;
-  }
+}

src/modules/form/assets/js/form.js

@@ -141,11 +141,46 @@ $(document).bind('shadow_open', function() {
 });
 
 $(document).ready(function() {
+
   // Attach the submit handler to the form
   $('.ajxa-form').on('submit', function(event) {
       submitFormViaAjax(event, this);
   });
+
+// Handle change event for radio buttons
+$('.stars-rating input').on('change', function() {
+    fillStars($(this));
+});
+    // Handle click event for labels
+    $('.stars-rating label').on('click', function() {
+      var $input = $(this).prev('input');
+      $input.prop('checked', true).trigger('change');
+  });
+
+// Initialize star ratings based on checked input
+$('.stars-rating input:checked').each(function() {
+    fillStars($(this));
+});
+
  });
+
+ // Function to handle star filling
+ function fillStars($element) {
+  var $parent = $element.closest('.stars-rating');
+  var selectedValue = $element.val();
+
+  $parent.find('label').each(function() {
+      var $label = $(this);
+      var labelValue = $label.prev('input').val();
+
+      if (labelValue <= selectedValue) {
+          $label.css('color', '#f5b301');
+      } else {
+          $label.css('color', '#ccc');
+      }
+  });
+}
+
 function submitFormViaAjax(e,form) {
   e.preventDefault(); // Prevent the default form submission
   formId = `#${$(form).attr('id')}`;

src/modules/form/classes/Qtags/FormItemRating.qtag.php

@@ -27,7 +27,7 @@ public function render() {
         default:
         for ($i=$max; $i >=1 ; $i--) { 
             $checked = ($value == $i) ? 'checked' : '';
-            $html_body .= "<input type=\"radio\" id=\"star$i\" name=\"$form_item_name\" value=\"$i\" $checked><label for=\"star$i\" title=\"$i stars\">★</label>";        }
+            $html_body .= "<input type=\"radio\" id=\"$form_item_name-star$i\" name=\"$form_item_name\" value=\"$i\" $checked><label for=\"star$i\" title=\"$i stars\">★</label>";        }
             break;
     }
     $html_body .= '</div>';