This code should allow users to choose the size and quantity of banners and the code will automatically calculate the price they have to pay. I tried so many ways but it failed. Below is the code that I had done
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("quantity").value);
var tot_price;
if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;
} else if (selFrst == 64) {
tot_price = selFrst * selScnd;
}
/*display the result*/
document.getElementById("tot_amount").value = tot_price;
}
<form id="banner" method="post" action="">
<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>
<tr>
<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
</tr>
<!--end payment-->
</table>
</form>
You have used id=quantity, but named quantity as point
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
You can see id="points" in the above line, and in the javascript you have used "quantity"
var selScnd = parseInt(document.getElementById("quantity").value);
And cannot guess what the if-else is actually written for, every condition is doing the same work. So remove the if-else. Try the code below.
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price = selFrst * selScnd;
/*display the result*/
document.getElementById("tot_amount").value = tot_price;
}
The id of the second div is wrong, also, you should compute the price only when both input are chosen:
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price;
if(selScnd && selFrst) {
if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;
} else if (selFrst == 64) {
tot_price = selFrst * selScnd;
}
document.getElementById("tot_amount").value = tot_price;
}
/*display the result*/
}
<form id="banner" method="post" action="">
<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>
<tr>
<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
</tr>
<!--end payment-->
</table>
</form>
Variable selScnd should be selected with the id point, not width quantity since there is no such id as quantity. In other words there is a typo in your Code.
Your code should be like this:
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price;
if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;
} else if (selFrst == 64) {
tot_price = selFrst * selScnd;
}
/*display the result*/
document.getElementById("tot_amount").value = tot_price;
}
<form id="banner" method="post" action="">
<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>
<tr>
<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
</tr>
<!--end payment-->
</table>
</form>
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price;
if ([120, 80, 64].includes(selFrst)) {
tot_price = selFrst * selScnd;
}
/*display the result*/
document.getElementById("tot_amount").value = tot_price;
}
<form id="banner" method="post" action="">
<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>
<tr>
<td>Size</td>
<td>
<select name="size" id="size">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4*15</option>
<option value="80">4*10</option>
<option value="64">4*8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly onfocus="calculateAmount()"></td>
</tr>
<!--end payment-->
</table>
</form>
Like #swebdev said "Variable selScnd should be selected with its id point because there is no such id as quantity.
You can put the values (120,80,64) in an array so that you can add more values easily without repeating the if-else.
Finally, instead of using onchange="" twice, you may use onfocus="" in that last read-only input box. :)
Still fail
<table border="1"width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<td>Size</td>
<td><select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="quantity" name="quantity" step="1"
min="1" max="499" onchange="calculateAmount()">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
</tr><!--end payment-->
</table>
</form>
<script>
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price = selFrst * selScnd;
/*display the result*/
document.getElementById("tot_amount").value = tot_price;
}
</script> <!--end table-->
Related
i cant get 0 on grand total when i enter the amount all in positive values then change the unit price all to negative values. but it works when i dont enter the positive value and only entering negative values into it. HELP ME GET THAT 0 PLEASE----------------------------------
This is my html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Book Ordering System</title>
<link rel="stylesheet" href="book-order.css">
</head>
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type = "text"></td>
<td><input type ="text"class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "number" name = "unit price" id="book1_price" placeholder = "0.00"></td>
<td><input type ="number" name = "Quantity" id="book1_quan" placeholder = "0"></td>
<td><input type ="number" name = "theProduct" id ="book1_total" class = "total" value = "0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type = "text" class="center"></td>
<td><input type = "text" class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "number" name = "unit price" id="book2_price" placeholder = "0.00" ></td>
<td><input type ="number" name = "Quantity" id= "book2_quan" placeholder = "0"></td>
<td><input type ="number" name = "total" id="book2_total" class = "total"value = "0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type = "text" class="center"></td>
<td><input type = "text" class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "numnber" name = "unit price" id="book3_price" placeholder = "0.00"></td>
<td><input type ="number" name = "Quantity" id="book3_quan" placeholder = "0"></td>
<td><input type ="number" name = "total" id="book3_total" class = "total"value = "0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type = "text" class="center"></td>
<td><input type = "text" class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "number" name = "unit price" id="book4_price" placeholder = "0.00"></td>
<td><input type ="number" name = "Quantity" id="book4_quan" placeholder = "0"></td>
<td><input type ="number" name = "total" id="book4_total" class = "total"value = "0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type = "text" class="center"></td>
<td><input type = "text" class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "number" name = "unit price" id="book5_price" placeholder = "0.00" min="0"></td>
<td><input type ="number" name = "Quantity" id="book5_quan"placeholder = "0"></td>
<td><input type ="number" name = "total" id="book5_total" class = "total"value = "0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan = "5"><input type = "Submit" id = "click" onclick = "calculateTotal()" value = "Calculated Grand Total Price" style="font-size: 18px;"></td>
<td colspan = "2"><input type = "number" name = "total" class= "total" id="grandtotal" value = "0.00" style = "width: 300px; height: 40px; font-weight: bolder; font-size: larger;"disabled/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id ="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
<br/>
</body>
this is my javascript:
function calculateTotal() {
const NumberOfBooks = 5;
for (let i = 1; i<= NumberOfBooks; ++i) {
document.getElementById("book" + i + "_price").value = (document.getElementById("book" + i + "_price").value / 1).toFixed(2);
}
// row 1
var price1 = document.getElementById("book1_price").value;
var quan1 = document.getElementById("book1_quan").value;
var total1 = document.getElementById("book1_total");
total1.value = (price1 * quan1).toFixed(2);
// row 2
var price2 = document.getElementById("book2_price").value;
var quan2 = document.getElementById("book2_quan").value;
var total2 = document.getElementById("book2_total");
total2.value = (price2 * quan2).toFixed(2);
// row 3
var price3 = document.getElementById("book3_price").value;
var quan3 = document.getElementById("book3_quan").value;
var total3 = document.getElementById("book3_total");
total3.value = (price3 * quan3).toFixed(2);
// row 4
var price4 = document.getElementById("book4_price").value;
var quan4 = document.getElementById("book4_quan").value;
var total4 = document.getElementById("book4_total");
total4.value = (price4 * quan4).toFixed(2);
// row 5
var price5 = document.getElementById("book5_price").value;
var quan5 = document.getElementById("book5_quan").value;
var total5 = document.getElementById("book5_total");
total5.value = (price5 * quan5).toFixed(2);
// grandtotal
var grandtotal = document.getElementById("grandtotal");
fulltotal = parseFloat(total1.value) + parseFloat(total2.value) + parseFloat(total3.value)
+ parseFloat(total4.value) + parseFloat(total5.value);
//error
if(fulltotal < 0) {
alert("An error has occurred: Please enter a positive value.");
document.getElementById("grandtotal")[0].value = 0;
fulltotal = 0
}
grandtotal.value = fulltotal.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal(){
var value = document.getElementById("grandtotal").value;
if(value > 250){
document.getElementById("button").style.display ="block";
} else {
document.getElementById('button').style.display ="none";
}
}
function newGrandTotal(){
var total = document.getElementById("grandtotal").value;
var newtotal = total-(total / 10);
alert("New grand total is :" + newtotal.toFixed(2));
}
I don't exactly know what you mean but I think you need to make an if() statement.
Like this:
if(newtotal < 0){
newtotal = 0;
}
Atleast i think you just don't want to go negative on the total. So when the newtotal is negative make it 0. If im getting you wrong let me know!
I comment this line document.getElementById("grandtotal")[0].value = 0; and it works.
You don't need to assign a value to grandtotal here because you only assign the grandtotal in the end of the function based on the value of the fulltotal.
function calculateTotal() {
const NumberOfBooks = 5;
for (let i = 1; i <= NumberOfBooks; ++i) {
document.getElementById("book" + i + "_price").value = (
document.getElementById("book" + i + "_price").value / 1
).toFixed(2);
}
// row 1
var price1 = document.getElementById("book1_price").value;
var quan1 = document.getElementById("book1_quan").value;
var total1 = document.getElementById("book1_total");
total1.value = (price1 * quan1).toFixed(2);
// row 2
var price2 = document.getElementById("book2_price").value;
var quan2 = document.getElementById("book2_quan").value;
var total2 = document.getElementById("book2_total");
total2.value = (price2 * quan2).toFixed(2);
// row 3
var price3 = document.getElementById("book3_price").value;
var quan3 = document.getElementById("book3_quan").value;
var total3 = document.getElementById("book3_total");
total3.value = (price3 * quan3).toFixed(2);
// row 4
var price4 = document.getElementById("book4_price").value;
var quan4 = document.getElementById("book4_quan").value;
var total4 = document.getElementById("book4_total");
total4.value = (price4 * quan4).toFixed(2);
// row 5
var price5 = document.getElementById("book5_price").value;
var quan5 = document.getElementById("book5_quan").value;
var total5 = document.getElementById("book5_total");
total5.value = (price5 * quan5).toFixed(2);
// grandtotal
var grandtotal = document.getElementById("grandtotal");
fulltotal =
parseFloat(total1.value) +
parseFloat(total2.value) +
parseFloat(total3.value) +
parseFloat(total4.value) +
parseFloat(total5.value);
//error
if (fulltotal < 0) {
alert("An error has occurred: Please enter a positive value.");
// document.getElementById("grandtotal")[0].value = 0;
fulltotal = 0;
}
grandtotal.value = fulltotal.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal() {
var value = document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
} else {
document.getElementById("button").style.display = "none";
}
}
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - total / 10;
alert("New grand total is :" + newtotal.toFixed(2));
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Book Ordering System</title>
<link rel="stylesheet" href="book-order.css" />
</head>
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="number"
name="unit price"
id="book1_price"
placeholder="0.00"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book1_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="theProduct"
id="book1_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="number"
name="unit price"
id="book2_price"
placeholder="0.00"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book2_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="total"
id="book2_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="numnber"
name="unit price"
id="book3_price"
placeholder="0.00"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book3_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="total"
id="book3_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="number"
name="unit price"
id="book4_price"
placeholder="0.00"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book4_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="total"
id="book4_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="number"
name="unit price"
id="book5_price"
placeholder="0.00"
min="0"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book5_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="total"
id="book5_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr id="footer">
<td colspan="5">
<input
type="Submit"
id="click"
onclick="calculateTotal()"
value="Calculated Grand Total Price"
style="font-size: 18px"
/>
</td>
<td colspan="2">
<input
type="number"
name="total"
class="total"
id="grandtotal"
value="0.00"
style="
width: 300px;
height: 40px;
font-weight: bolder;
font-size: larger;
"
disabled
/>
</td>
</tr>
</table>
<br />
<input
style="display: none"
type="button"
id="button"
class="btn"
value="Discount 10%"
onclick="newGrandTotal()"
/>
<br />
<br />
Go back to home
<br />
</body>
<script src="test.js"></script>
</html>
You could address the right element withou using an index.
Beside this, you could take a function for getting the products of all rows to prevent writing more code than necessary to get a row total.
Finally exit the function on error.
(In a next step, I would suggest to duplicate the data as array and use this values instead if retrieving data from input. Onyl changes of input should change the array for final total with discount.)
function calculateTotal() {
function calculateRow(row) {
const
price = document.getElementById(`${row}_price`),
quantity = document.getElementById(`${row}_quan`),
total = document.getElementById(`${row}_total`),
product = price.value * quantity.value;
price.value = (+price.value).toFixed(2);
total.value = product.toFixed(2);
return product;
}
const NumberOfBooks = 5;
let total = 0;
for (let i = 1; i <= NumberOfBooks; ++i) {
total += calculateRow(`book${i}`);
}
// grandtotal
var grandtotal = document.getElementById("grandtotal");
if (total < 0) {
alert("An error has occurred: Please enter a positive value.");
grandtotal.value = '0.00';
return;
}
grandtotal.value = total.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal() {
var value = document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
} else {
document.getElementById('button').style.display = "none";
}
}
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - (total / 10);
alert("New grand total is :" + newtotal.toFixed(2));
}
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book1_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book1_quan" placeholder="0"></td>
<td><input type="number" name="theProduct" id="book1_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book2_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book2_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book2_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="numnber" name="unit price" id="book3_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book3_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book3_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book4_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book4_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book4_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book5_price" placeholder="0.00" min="0"></td>
<td><input type="number" name="Quantity" id="book5_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book5_total" class="total" value="0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan="5"><input type="Submit" id="click" onclick="calculateTotal()" value="Calculated Grand Total Price" style="font-size: 18px;"></td>
<td colspan="2"><input type="number" name="total" class="total" id="grandtotal" value="0.00" style="width: 300px; height: 40px; font-weight: bolder; font-size: larger;" disabled/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
Hay, i want make some calculator that can make total price with auto fill. First i select option to choose the plan, than after choose the plan the basic price will generated automatically, after that i input the discount value, than the total price will auto generated (basic price-discount). How to implement that to my code:
Here my HTML:
<form name="cal" action="">
<table>
<caption>
<h1>
Kalkulator
</h1>
<h3>
Paket Wisata Imam Tour
</h3>
</caption>
<tr>
<td>Nama Paket Tour</td>
<td>:</td>
<td>
<select name="" id="paket" onchange="myFunction(event)">
<option selected disabled>...</option>
<option value="Bali">Paket Tour Bali</option>
<option value="Korea">Paket Tour Korea</option>
<option value="Eropa">Paket Tour Eropa</option>
</select>
</td>
</tr>
<tr>
<td>Harga Paket</td>
<td>:</td>
<td>Rp.<input id="harga" name="harga" type="number" value="0"></td>
</tr>
<tr>
<td>Diskon</td>
<td>:</td>
<td><input id="diskon" name="diskon" type="number">%</td>
</tr>
<tr>
<td>Total Bayar</td>
<td>:</td>
<td><input id="tot" name="tot" type="text" value=""></td>
</tr>
</table>
</form>
My JS:
function myFunction(event) {
console.log(event.target.value)
if (event.target.value === "Bali") {
document.getElementById("harga").value = 700000;
} else if (event.target.value === "Korea") {
document.getElementById("harga").value = 1500000;
} else if (event.target.value === "Eropa") {
document.getElementById("harga").value = 4000000;
}
};
You could add event listeners to the paket and diskon fields. Make sure the fields have those names.
const form = document.forms['cal'];
const hargaMap = {
Bali: 700000,
Korea: 1500000,
Eropa: 4000000
};
const main = () => {
form.elements.paket.addEventListener('change', onPaketChange);
form.elements.diskon.addEventListener('change', onDiskonChange);
form.elements.diskon.addEventListener('input', onDiskonChange);
};
const applyDiscount = (amount, discount) => amount - (amount * discount);
const onPaketChange = e => {
form.elements.harga.value = hargaMap[e.target.value] || 0;
};
const onDiskonChange = e => {
const harga = parseInt(form.elements.harga.value || '0', 10);
const diskon = parseInt(form.elements.diskon.value || '0', 10) / 100;
form.elements.tot.value = applyDiscount(harga, diskon).toFixed(2);
};
main();
<form name="cal" action="">
<table>
<caption>
<h1>
Kalkulator
</h1>
<h3>
Paket Wisata Imam Tour
</h3>
</caption>
<tr>
<td>Nama Paket Tour</td>
<td>:</td>
<td>
<select name="paket" id="paket">
<option selected disabled>...</option>
<option value="Bali">Paket Tour Bali</option>
<option value="Korea">Paket Tour Korea</option>
<option value="Eropa">Paket Tour Eropa</option>
</select>
</td>
</tr>
<tr>
<td>Harga Paket</td>
<td>:</td>
<td>Rp.<input id="harga" name="harga" type="number" value="0"></td>
</tr>
<tr>
<td>Diskon</td>
<td>:</td>
<td><input id="diskon" name="diskon" type="number" min="0" value="0">%</td>
</tr>
<tr>
<td>Total Bayar</td>
<td>:</td>
<td><input id="tot" name="tot" type="text" value="0.00"></td>
</tr>
</table>
</form>
The sum of single selected item is working, but I have no idea how I can connect the value of "Default price" (that I have used for demo) to "Total" for the rest of the calculations (Taxes and Discount).
function chaked1() {
$("#filled-in-box1").click(function(event) {
if (this.checked) {
document.getElementById("one").value = document.getElementById("filled-in-box1").value;
document.getElementById('one').readOnly = false;
} else {
document.getElementById("one").value = "0";
document.getElementById('one').readOnly = true;
}
});
}
function chaked2() {
$("#filled-in-box2").click(function(event) {
if (this.checked) {
document.getElementById("two").value = document.getElementById("filled-in-box2").value;
document.getElementById('two').readOnly = false;
} else {
document.getElementById("two").value = "0";
document.getElementById('two').readOnly = true;
}
});
}
$(".tot_amount").click(function(event) {
var total = 0;
$(".tot_amount:checked").each(function() {
total += parseInt($(this).val());
});
if (total == 0) {
$('#cost').val('');
} else {
$('#cost').val(total);
}
});
function updateInput() {
var discount = document.getElementsByName("discount")[0].value;
var cost = document.getElementsByName("cost")[0].value;
document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
var taxes = document.getElementsByName("taxes")[0].value; // <======================
if (isNaN(taxes)) // IF "no taxes" IS SELECTED...
document.getElementsByName("ttaxes")[0].value = 0;
else {
cost = document.getElementsByName("price")[0].value;
document.getElementsByName("ttaxes")[0].value = (cost * (taxes / 100));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" class="tot_amount" value="10" id="filled-in-box1" onclick="chaked1();">10
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="tot_amount" value="20" id="filled-in-box1" onclick="chaked1();">20
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="tot_amount" value="30" id="filled-in-box1" onclick="chaked1();">30
</td>
</tr>
<tr></tr>
<tr>
<td>Total
<input type="text" id="cost" readonly>
</td>
</tr>
<tr>
<td width="98">Taxes</td>
<td width="115">Discount</td>
<td width="118">Default price</td>
</tr>
<tr>
<td>
<select class="select" name="taxes" onChange="updateInput()">
<option value="no" selected>no taxes</option>
<option value="19">19% taxes</option>
<!-- <====================== -->
</select>
</td>
<td>
<select class="select" name="discount" onChange="updateInput()">
<option value="0" selected>0% discount</option>
<option value="5">5% discount</option>
<option value="10">10% discount</option>
<option value="20">20% discount</option>
</select>
</td>
<td>
<input type="text" class="select" name="cost" id="cost" value="1000">
</td>
</tr>
<tr>
<td>Price after discount</td>
<td>Taxes</td>
<td> </td>
</tr>
<tr>
<td>
<input type="text" name="price" value="0">
</td>
<td>
<input type="text" name="ttaxes" value="0">
</td>
<!-- <====================== -->
</tr>
</table>
I want to get the value of the Amount pass to either Debit Amount or Credit Amount base on the Type selected if DR is select, then the value should be pass to Debit Amount and if CR is selected, then the value should be pass to Credit Amount. Total Amount should be passed in case of multiple Type options are selected
The HTML
<div>
<label style="margin-bottom:3px;">Debit Amount</label><span>
<input type="text" name="total_debit" id="totalDebit"/></span>
</div>
<div>
<label>Credit Amount</label><span>
<input type="text" name="total_credit" id="totalCredit" /></span>
</div>
<table class="table-bordered table-hover">
<thead>
<tr>
<th width="2%"><input id="check_all" type="checkbox"/></th>
<th width="5%">Type</th>
<th width="5%">Account Code</th>
<th width="15%">Account Name</th>
<th width="10%">Fund</th>
<th width="10%">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_1">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_1">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_1"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_1" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_2">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_2">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_2"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_2" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_3">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_3">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_3"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_3" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_4">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_4">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_4"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_4" class="totalLineAmount">
</td>
</tr>
</tbody>
</table>
Jquery Script
<script>
$(function(){
$(document).on("change",".mySelect",function(e){
e.preventDefault();
var _this=$(this);
var id =_this.val();
if ( id == 1) {
calculateTotalDebit();
}else if (id == 2) {
calculateTotalCredit();
}
function calculateTotalDebit(){
total = 0;
$('.totalLineAmount').each(function(){
if($(this).val() != '' )total += parseFloat( $(this).val() );
$('#totalDebit').val( total.toFixed(2) );
});
}
function calculateTotalCredit(){
total = 0;
$('.totalLineAmount').each(function(){
if($(this).val() != '' )total += parseFloat( $(this).val() );
});
$('#totalCredit').val( total.toFixed(2) );
}
});
});
</script>
$('.totalLineAmount') is selecting all of the amount inputs, so the calculateTotalDebit and calculateTotalCredit functions are adding them all regardless of the DR/CR type. You can check for the type inside the functions, for calculateTotalDebit for example:
function calculateTotalDebit(){
var total = 0;
$('.totalLineAmount').each(function(){
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is DR (val == 1)
if($(this).val() != '' && type.val() == 1)total += parseFloat( $(this).val() );
$('#totalDebit').val( total.toFixed(2) );
});
$(function() {
$(document).on("change", ".mySelect", function(e) {
e.preventDefault();
var _this = $(this);
var id = _this.val();
if (id == 1) {
calculateTotalDebit();
} else if (id == 2) {
calculateTotalCredit();
}
function calculateTotalDebit() {
total = 0;
$('.totalLineAmount').each(function() {
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is DR (val == 1)
if ($(this).val() != '' && type.val() == 1) total += parseFloat($(this).val());
$('#totalDebit').val(total.toFixed(2));
});
}
function calculateTotalCredit() {
total = 0;
$('.totalLineAmount').each(function() {
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is CR (val == 2)
if ($(this).val() != '' && type.val() == 2) total += parseFloat($(this).val());
});
$('#totalCredit').val(total.toFixed(2));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label style="margin-bottom:3px;">Debit Amount</label><span>
<input type="text" name="total_debit" id="totalDebit"/></span>
</div>
<div>
<label>Credit Amount</label><span>
<input type="text" name="total_credit" id="totalCredit" /></span>
</div>
<table class="table-bordered table-hover">
<thead>
<tr>
<th width="2%">
<input id="check_all" type="checkbox" />
</th>
<th width="5%">Type</th>
<th width="5%">Account Code</th>
<th width="15%">Account Name</th>
<th width="10%">Fund</th>
<th width="10%">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_1">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_1">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_1">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_1" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_2">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_2">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_2">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_2" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_3">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_3">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_3">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_3" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_4">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_4">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_4">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_4" class="totalLineAmount">
</td>
</tr>
</tbody>
</table>
I guess you have to update both "Debit Amount" and "Credit Amount" boxes, so you have to call both functions each time. It may be better to merge both functions into one calculateAmounts function. I'd also add event listeners to the .totalLineAmount boxes to update the totals automatically.
Try this code instead (demo):
$(function() {
function calculateTotals() {
var DRTotal = 0,
CRTotal = 0;
$('.totalLineAmount').each(function() {
var $this = $(this),
val = $this.val() || 0,
type = $this.closest('tr').find('.mySelect').val();
if (val && type === "1") {
DRTotal += parseFloat(val);
} else if (val && type === "2") {
CRTotal += parseFloat(val);
}
});
$('#totalDebit').val(DRTotal.toFixed(2));
$('#totalCredit').val(CRTotal.toFixed(2));
}
$(document).on("change", ".mySelect, .totalLineAmount", function(e) {
e.preventDefault();
calculateTotals();
});
});
In my opinion, you should add event listener on each input, calculate and put proper data into total amount in your callback function like
$('.myInputClass').on('change', function() {
// your code here..
updateAmountField(amount);
});
function updateAmountField(amount) {
$('.myTotalAmountInput').value(amount);
}
I am calculating TAX/TDR automatically in the form.
But, it is not working. What am I doing wrong here?
The form tab includes :
Amount : user entered
Card type : select option
Visa (add 20% to amount)
Amex card(add 17.5% to amount)
other (add 15% to amount)
Grand Total : Amount + selected card type % amount
<html>
<head>
<script>
var calcObject = {
amountNull : '0.00',
amountTax : '0.00',
amountTotal : '0.00',
};
run : function() {
var amount = $('#amount').val();
var tax = $('#tax').val();
var included = $('#tax_included').is(':checked');
if (amount !== '' && tax !== '') {
if (included) {
var amountNew = amount / ((tax / 100) + 1);
calcObject.amountTax = parseFloat(amount) - parseFloat(amountNew);
calcObject.amountTotal = amountNew.toFixed(2);
} else {
calcObject.amountTax = (amount * tax) / 100;
calcObject.amountTotal = parseFloat(amount) + parseFloat(calcObject.amountTax);
}
$('#tax_amount').val(parseFloat(calcObject.amountTax).toFixed(2));
$('#total_amount').val(parseFloat(calcObject.amountTotal).toFixed(2));
} else {
$('#tax_amount').val(calcObject.amountNull);
$('#total_amount').val(calcObject.amountNull);
}
}
$(function() {
$('#amount').keyup(function() {
calcObject.run();
});
$('#tax_included').click(function() {
calcObject.run();
});
$('#tax').change(function() {
calcObject.run();
});
});
</script>
</head>
<body>
<form id="calculator" method="post">
<table class="tbl_insert">
<tr>
<th><label for="amount">Amount:</label></th>
<td>
<input type="text" name="amount" id="amount" value="" class="field" />
</td>
</tr>
<tr>
<th><label for="tax_included">TDR included?:</label></th>
<td>
<input type="checkbox" name="tax_included" id="tax_included" />
</td>
</tr>
<tr>
<th><label for="tax">Card Type :</label></th>
<td>
<select name="tax" id="tax" class="select">
<option value="20">VISA</option>
<option value="17.5">Amex card</option>
<option value="15">other</option>
</select>
</td>
</tr>
<tr>
<th><label for="tax_amount">VAT/Tax:</label></th>
<td>
<input type="text" name="tax_amount" id="tax_amount"
value="0.00" class="field" disabled="disabled" />
</td>
</tr>
<tr>
<th><label for="total_amount">Total:</label></th>
<td>
<input type="text" name="total_amount" id="total_amount"
value="0.00" class="field" disabled="disabled" />
</td>
</tr>
</table>
</form>
</body>
</html>
You have several errors.
Syntax error with object calcObject definition
Jquery is not included
I fixed them and this will work...
JSFIDDLE DEMO
<html>
<head>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<script>
var calcObject = {
amountNull : '0.00',
amountTax : '0.00',
amountTotal : '0.00',
run : function() {
var amount = $('#amount').val();
var tax = $('#tax').val();
var included = $('#tax_included').is(':checked');
if (amount !== '' && tax !== '') {
if (included) {
var amountNew = amount / ((tax / 100) + 1);
calcObject.amountTax = parseFloat(amount) - parseFloat(amountNew);
calcObject.amountTotal = amountNew.toFixed(2);
} else {
calcObject.amountTax = (amount * tax) / 100;
calcObject.amountTotal = parseFloat(amount) + parseFloat(calcObject.amountTax);
}
$('#tax_amount').val(parseFloat(calcObject.amountTax).toFixed(2));
$('#total_amount').val(parseFloat(calcObject.amountTotal).toFixed(2));
} else {
$('#tax_amount').val(calcObject.amountNull);
$('#total_amount').val(calcObject.amountNull);
}
}
};
$(function() {
$('#amount').keyup(function() {
calcObject.run();
});
$('#tax_included').click(function() {
calcObject.run();
});
$('#tax').change(function() {
calcObject.run();
});
});
</script>
</head>
<body>
<form id="calculator" method="post">
<table class="tbl_insert">
<tr>
<th><label for="amount">Amount:</label></th>
<td>
<input type="text" name="amount" id="amount" value="" class="field" />
</td>
</tr>
<tr>
<th><label for="tax_included">TDR included?:</label></th>
<td>
<input type="checkbox" name="tax_included" id="tax_included" />
</td>
</tr>
<tr>
<th><label for="tax">Card Type :</label></th>
<td>
<select name="tax" id="tax" class="select">
<option value="20">VISA</option>
<option value="17.5">Amex card</option>
<option value="15">other</option>
</select>
</td>
</tr>
<tr>
<th><label for="tax_amount">VAT/Tax:</label></th>
<td>
<input type="text" name="tax_amount" id="tax_amount"
value="0.00" class="field" disabled="disabled" />
</td>
</tr>
<tr>
<th><label for="total_amount">Total:</label></th>
<td>
<input type="text" name="total_amount" id="total_amount"
value="0.00" class="field" disabled="disabled" />
</td>
</tr>
</table>
</form>
</body>
</html>