I have looked up and down trying to figure this out, I am trying to make a simple calculation on change event with 3 textbox inputs
Cost of Item textbox
Discount Percentage which would be entered manually of value exp: 29
Total: which will equal the Cost *'s Discount equal the new Total.
When Discount or Cost is changed then the Total will change with them I have the javascript of getting the total somewhat...but i also need to format the Cost & Total from numeric to currency instead of 2500 it formats to $2,500.00 etc
Any help is appreciated im new to this and still learning but im just lost
var number = 14000;
var percentToGet = 29;
var percent = (percentToGet / 100) * number;
alert(percentToGet + "% of " + number + " is " + percent);
function calculatePercent(percent, num){
return (percent / 100) * num;
This gives me the discount of 4,060 of 14,000 which total becomes 9,940
I may need to use jquery or ajax but i have no idea where to begin.
hope below test implementation can help , please input all item price and discount to observe the result
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Form</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Calculate Discount </h1>
<form id="discountForm">
<div class="row mb-3">
<div class="row col-md-12">
<div class="col-md-3">
<label for="name" class="form-label">Item Name</label>
</div>
<div class="col-md-3">
Item Price
</div>
<div class="col-md-3 text-center">
Item Price After Dicount
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-md-3">
<label for="name" class="form-label">Item 1</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="item__1">
</div>
<div class="col-md-3 text-center" id="discunt_price_1">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-md-3">
<label for="name" class="form-label">Item 2</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="item__2">
</div>
<div class="col-md-3 text-center" id="discunt_price_2">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-md-3">
Discount %
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="discount" >
</div>
<div class="col-md-3 text-center">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-md-3">
</div>
<div class="col-md-3 text-right">
Total After Discount
</div>
<div class="col-md-3 text-center" id="total_price">
</div>
</div>
</div>
<!-- <button type="button" class="btn btn-primary">Submit</button>-->
</form>
</div>
<!-- Include Bootstrap JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const isDigit = (value) => /^\d+$/.test(value) ;
const calculatePercent = (percent, num) => {
return num - ((percent / 100) * num);
}
const setDiscountPrice = () => {
let flagInputError = false;
$("[id^='item__']").each(function (e) {
let id = $(this).attr('id').replace("item__", "");
let itemPrice = $("#item__"+id).val();
let discount = $("#discount").val();
if(isDigit(itemPrice) && isDigit(discount)) {
$("#discunt_price_"+id).html(calculatePercent(discount, itemPrice).toFixed(2));
}
else {
flagInputError = true;
}
});
if(flagInputError) {
$("[id^='item__']").each(function (e) {
let id = $(this).attr('id').replace("item__", "");
$("#discunt_price_"+id).html("");
$("#total_price").html("");
});
}
else {
let total = 0;
$("[id^='item__']").each(function (e) {
let id = $(this).attr('id').replace("item__", "");
total += parseFloat($("#discunt_price_"+id).html());
});
$("#total_price").html(total.toFixed(2));
}
}
$(document).ready(function() {
var inputs = $('#discountForm input');
inputs.change(function() {
setDiscountPrice();
});
});
</script>
</body>
</html>