I want to pass the value of variable declared in script tag of handlebar page to mysql database while submitting the form. I want to give some ratings and reviews to a particular post. On mouseenter and mouseleave the rating value will change and on submit it will be stored into database
This is my form in handlebars page
<form class="custom-form hero-form" action="/papers/add_review/{{paper.id}}" method="POST" role="form">
<div class="row">
<div class="col-12">
<div class="d-flex flex-wrap align-items-center mt-4 mt-lg-0">
<span class="text-black mb-lg-0 mb-md-0 me-3">Rate The Paper:</span>
<h4 class="text-center mt-2 mb-4"><i class="fa-solid fa-star star-regular submit_star mr-1" id="submit_star_1" data-rating="1"></i>
<i class="fa-solid fa-star star-regular submit_star mr-1" id="submit_star_2" data-rating="2"></i>
<i class="fa-solid fa-star star-regular submit_star mr-1" id="submit_star_3" data-rating="3"></i>
<i class="fa-solid fa-star star-regular submit_star mr-1" id="submit_star_4" data-rating="4"></i>
<i class="fa-solid fa-star star-regular submit_star mr-1" id="submit_star_5" data-rating="5"></i>
</h4>
</div>
</div>
<div class="col-lg-12 col-12">
<div class="input-group">
<textarea class="form-control" name="user_review" id="user_review" placeholder="Comment As {{name}}"></textarea>
</div>
</div>
<div class="col-lg-12 col-12">
<button type="submit" class="form-control" id="save_review">
Submit
</button>
</div>
</div>
</form>
This is my script tag in that same hbs file
<script>
var rating_data = 0
$(".submit_star").on('mouseenter', function(){
var rating = $(this).data('rating');
reset_background();
for(var count = 1; count <= rating; count++)
{
$('#submit_star_'+count).addClass('text-warning');
}
})
function reset_background()
{
for(var count = 1; count <= 5; count++)
{
$('#submit_star_'+count).addClass('star-light');
$('#submit_star_'+count).removeClass('text-warning');
}
}
$(".submit_star").on('mouseleave', function(){
reset_background();
for(var count = 1; count <= rating_data; count++)
{
$('#submit_star_'+count).removeClass('star-regular');
$('#submit_star_'+count).addClass('text-warning');
}
})
$(".submit_star").on('click', function(){
rating_data = $(this).data('rating');
})
</script>
Now, on submit the button I want to store the value of “rating_data” variable in to mysql database in user_rating column.
This is my route for submission
router.post("/add_review/:id", checklogin, (req, res) => {
if (req.role === "admin" || req.role === "user") {
console.log(req.email);
let { user_review, rating_data } = req.body;
let commentDate = new Date().toLocaleDateString();
let commentTime = new Date().toLocaleTimeString();
User.findOne({ where: { email: req.email } }).then((user) => {
Paper.findOne({
where: { id: req.params.id },
include: [
{
model: PaperTopic,
//required: true
},
{
model: Category,
},
],
}).then((p1) => {
const newReview = new Review({
user_name: user.name,
user_email: user.email,
user_rating: rating_data,
user_review,
commentDate,
commentTime,
paperId: p1.id,
userId: user.id,
});
newReview.save().then((new_review) => {
res.redirect('/papers/' +p1.title )
});
});
});
} else {
let { user_name, user_email, user_review, rating_data } = req.body;
let commentDate = new Date().toLocaleDateString();
let commentTime = new Date().toLocaleTimeString();
User.findOne({ where: { email: req.email } }).then((user) => {
Paper.findOne({
where: { id: req.params.id },
include: [
{
model: PaperTopic,
//required: true
},
{
model: Category,
},
],
}).then((p1) => {
const newReview = new Review({
user_name,
user_email,
user_rating: rating_data,
user_review,
commentDate,
commentTime,
paperId: p1.id,
userId: "NULL",
});
newReview.save().then((new_review) => {
res.redirect('/papers/'+p1.title )
});
});
});
}
});
module.exports = router;
I tried using req.body . After that it shows null. Please help me out