In this tutorial has helped you learn how to create star rating feedback using javascript
First of all, create simple form
<form method="GET" name="feedback" action="#" onsubmit="feedBack(); return false">
<input type="radio" name="star" id="rate" value="">
<textarea cols="30" id="comment" placeholder="Describe your comment"></textarea>
</form>
while development use the fontawesome icons and google fonts
Now get the input values using javascript
function feedBack() {
var rating_Count = document.querySelector("input[name=star]:checked").value;
var comment = document.getElementById('comment').value;
document.getElementById('comment_text').innerHTML = comment;
document.getElementById('star_count').innerHTML = rating_Count;
}
Adding simple validation
document.getElementById('comment').value === ''
if value is empty shown error message.
Youtube Video : https://youtube.com/shorts/2LLre0ld1pk?feature=share
Demo : https://star-rating-feedback.vercel.app/
Portfolio : https://rajamanickam.vercel.app/
Github : https://github.com/erajamanickam/star-rating-feedback
Codepen : https://codepen.io/erajamanickam/pen/dyjydOj
Top comments (0)