I am building an application based on node.js and using handlebars as view engine. the problem is I have a form that when submitted it inserts data into the database. this forms passes some values that the user does not see, like the bookingAmount for example. I currently use a hidden input field that contains the value for the booking which is passed to nodeJs through req.body. the problem is the user can open the "inspect element" in his browser and change this booking Amount before submiting the form !! how can I prevent such thing from happening ? code for the handlebars form (inside page bookingDetails.handlebars):
<form action="/finish" method="POST" style="display: inline;">
<input type="hidden" name="bookingId" value="{{data.bookingId}}">
<input type="hidden" name="Id" value="{{data.user.userId}}">
<input type="hidden" name="bookingAmount" value="{{data.bookingAmount}}">
<button type="submit" id="finish">Finish Tour</button>
</form>
the above data.XXXXX is passed on from nodeJs when the page loads by the below code:
var bookingDetails=bookings.findOne({where:{bookingId: req.body.bookingId}, include: [{model: locations},{model: user}).then((bookingDetails)=>{
res.render('tPages/bookingDetails',{data: bookingDetails})
})
The same problem exists for some buttons on the page. the page contains buttons like edit , cancel and submit. I want to make those buttons enabled or disabled depending on the booking status. I am using a script in the handlebars page to change the disabled property to true or false depending on the booking status. still the user can change the "disabled" property in his browser and use the button, here is the script I use:
<script>
status='{{data.bookingStatus}}'
if (status=='accepted'){
document.getElementById("cancel").disabled = true;
}else if (status=='pending'){
document.getElementById("finish").disabled = true;
document.getElementById("noshow").disabled = true;
}else if (status=='finished' || status =='noshow' || status=='cancelled' || status=='rejected'){
document.getElementById("cancel").disabled = true;
document.getElementById("finish").disabled = true;
document.getElementById("noshow").disabled = true;
}
</script>
what is the solution for such issues ?