Auto fill total price use javascript dom - javascript

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>

Related

Javascript: Auto Calculate dropdown price*quantity input

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-->

Why is my code not returning a value for a future value payment?

Trying to create a Javascript for future value calculation. This is the code im using but it is not returning a value. Don't know where the code is wrong. Has user input investment, interest rate, monthly payment added, and terms. After that code how do I create a for loop to create an amortization schedule.
<body>
<form name="fv">
<table>
<tr><td colspan="3"><b>Enter Investment Information:</b></td></tr>
<tr>
<td>1)</td>
<td>Amount of the Investment (any currency):</td>
<td>
<input type="text" name="investment" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>2)</td>
<td>percentage rate of interest:</td>
<td>
<input type="text" name="interest" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>3)</td>
<td>Monthly Payment Amount:</td>
<td>
<input type="text" name="monthly" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>4)</td>
<td>Terms:</td>
<td>
<input type="text" name="terms" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Calculate" onclick="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<b>Investment Information:</b>
</td>
</tr>
<tr>
<td>4)</td>
<td>Your Investment will be worth:</td>
<td><input type="text" name="payment" size="12"></td>
</tr>
</table>
</form>
<script language="JavaScript">function calculate() {
var investment = document.fv.investment.value;
var interest = document.fv.interest.value / 100 / 12;
var terms = document.fv.terms.value * 12;
var x = Math.pow(1 + interest, terms);
var monthly = (investment * x);
if (!isNaN(monthly) &&
(monthly != Number.POSITIVE_INFINITY) &&
(monthly != Number.NEGATIVE_INFINITY)) {
document.fv.payment.value = round(monthly);
}
else {
document.fv.payment.value = "";
}
}
function round(x) {
return Math.round(x * 100) / 100;
</script>
I don't know what exactly you meant but it return value into input you haven't closed round func and wrong type on script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="fv">
<table>
<tr><td colspan="3"><b>Enter Investment Information:</b></td></tr>
<tr>
<td>1)</td>
<td>Amount of the Investment (any currency):</td>
<td>
<input type="text" name="investment" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>2)</td>
<td>percentage rate of interest:</td>
<td>
<input type="text" name="interest" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>3)</td>
<td>Monthly Payment Amount:</td>
<td>
<input type="text" name="monthly" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>4)</td>
<td>Terms:</td>
<td>
<input type="text" name="terms" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Calculate" onclick="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<b>Investment Information:</b>
</td>
</tr>
<tr>
<td>4)</td>
<td>Your Investment will be worth:</td>
<td><input type="text" name="payment" size="12"></td>
</tr>
</table>
</form>
<script type="text/javascript">
function calculate() {
var investment = document.fv.investment.value;
var interest = document.fv.interest.value / 100 / 12;
var terms = document.fv.terms.value * 12;
var x = Math.pow(1 + interest, terms);
var monthly = (investment * x);
if (!isNaN(monthly) && (monthly !== Number.POSITIVE_INFINITY) &&
(monthly !== Number.NEGATIVE_INFINITY)) {
document.fv.payment.value = round(monthly);
}
else {
document.fv.payment.value = "";
}
}
function round(x) {
return Math.round(x * 100) / 100;
}
</script>
</body>
</html>

Script - Apply a percentage discount to sum values

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>

Multiple instances of same calculator in Javascript

I am new to Javascript and trying to create an on-line score tracker for a card game I play called Hand and Foot. The rules are this, 3 teams play 4 games, the team with the most points at the end wins. I have created a calculator for 1 person for 1 game, but when I duplicate it for the 11 more instances I need, the calculations stop working which I believe has to do with the getElementById not registering with the multiple instances in the html. I would be grateful suggestions on a more elegant way to create instances of this calculator on the same page without having to change the IDs of each field for each play and each game. check out my code Fiddle
<div class="P1G1">
<h1>Game 1</h1>
<form id="calcP1G1">
<h2>Neccessary Piles</h2>
<table>
<td>Clean</td>
<td align="center">
<input id="necCleanP1G1" type="checkbox" class="addon" value="500">
</td>
<td>Dirty</td>
<td align="center">
<input id="necDirtyP1G1" type="checkbox" class="addon" value="300">
</td>
<td>Sevens</td>
<td align="center">
<input id="necSevenP1G1" type="checkbox" class="addon" value="5000">
</td>
<td>Fives</td>
<td align="center">
<input id="necFiveP1G1" type="checkbox" class="addon" value="3000">
</td>
<td>Wilds</td>
<td align="center">
<input id="necWildP1G1" type="checkbox" class="addon" value="2500">
</td>
<td id="necTotalP1G1" style="display:none"></td>
</table>
<hr>
<table>
<tr>
<th class="pile-header">Clean Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cleanP1G1" type="text" value="0" oninput="calculate()" class="form-control" />
</td>
<td class="result-number">
<input id="resultCleanP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Dirty Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="dirtyP1G1" type="text" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultDirtyP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Red 3s</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="redThreeP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultRedThreeP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Card Count</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cardsP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultCardP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<td class="pile-header">Total</td>
<td class="result-number">
<input id="resultTotalP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
</table>
</form>
</div>
Javascript
function updateTotal() {
var add = 0;
var form = document.getElementById("calcP1G1");
var checkboxes = form.getElementsByClassName('addon');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
}
}
var amount = document.getElementById("necTotalP1G1").innerHTML = add;
}
document.getElementById("calcP1G1").addEventListener('change', updateTotal);
// Run it once at startup
updateTotal();
function calculate() {
var topCards = document.getElementById("necTotalP1G1").innerHTML;
var cleanBox = document.getElementById("cleanP1G1").value;
var totalClean = document.getElementById("resultCleanP1G1");
var resultClean = cleanBox * 500;
totalClean.value = resultClean;
//---------------------//
var dirtyBox = document.getElementById("dirtyP1G1").value;
var totalDirty = document.getElementById("resultDirtyP1G1");
var resultDirty = dirtyBox * 300;
totalDirty.value = resultDirty;
//---------------------//
var redThreeBox = document.getElementById("redThreeP1G1").value;
var totalRedThree = document.getElementById("resultRedThreeP1G1");
var resultRedThree = redThreeBox * 100;
totalRedThree.value = resultRedThree;
//---------------------//
var cardBox = document.getElementById("cardsP1G1").value;
var totalCard = cardBox;
document.getElementById("resultCardP1G1").value = totalCard;
//---------------------//
var total = parseInt(resultDirty) + parseInt(resultClean) + parseInt(resultRedThree) + parseInt(totalCard) + parseInt(topCards);
document.getElementById("resultTotalP1G1").value = total;
}
document.getElementById("calcP1G1").addEventListener('change', calculate);
// Run it once at startup
calculate();

Calculate Tax/TDR automatically in web form

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>

Categories