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>
Related
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>
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>
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 have created a form, here when click on edit button from a dynamically created table it is not fetching the form values.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Generate Challan </title>
<link type="text/css" href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/jquery-json/downloads/detail?name=jquery.json-2.2.min.js"></script>
<script type="text/javascript">
data = new Array();
$(document).ready(function(){
$(".addbutton").click(function() {
var row = new Array(12);
row[0] = $("#txtbox1").val();
row[1] = $("#txtbox2").val();
row[2] = $("#txtbox3").val();
row[3] = $("#txtbox4").val();
row[4] = $("#H1").val();
row[5] = $("#I1").val();
row[6] = $("#G1").val();
row[7] = $("#J1").val();
row[8] = $("#B1").val();
row[9] = $("#C1").val();
row[10] = $("#D1").val();
row[11] = $("#E1").val();
data.push(row);
refresh();
});
$('#myform')[0].reset(); //reset form stmt
//Edit function
var $tds = null;
$('#datatable').on('click', 'td:last-child', function (e) {
var $tr = $(this).parent(),
$tds = $tr.children(),
sname = $tds.eq(0).text().trim(),
mon = $tds.eq(1).text().trim();
year = $tds.eq(2).text().trim();
$('#G1 option').each(function () {
if ($(this).text().trim() == sname) {
$(this).prop('selected', true);
return false;
}
});
$('#H1 option').each(function () {
if ($(this).text().trim() == mon) {
$(this).prop('selected', true);
return false;
}
});
$('#I1 option').each(function () {
if ($(this).text().trim() == year) {
$(this).prop('selected', true);
return false;
}
});
$('#J1').val($tds.eq(3).text().trim())
$('#E1').val($tds.eq(4).text().trim())
e.preventDefault();
});
$("#myform").submit(function(){
var val = $.toJSON(data);
$("#data").attr("value",val);
if(data.length == 0){
alert("Table is empty !");
return false;
}else{
return true;
}
});
});
function refresh(){
$("#datatable").find("tr:gt(1)").remove();
publishtable();
}
function publishtable(){
for(var c=0;c<data.length;c++){
var trow = $('<tr valign="middle">').addClass("contact");
$("<td>").text(c+1).appendTo(trow);
for(var i=0;i<12;i++){
$("<td>").text(data[c][i]).appendTo(trow);
}
var abutton = $('<input type="button" class="editrow" value="Edit">');
var acell = $("<td>");
abutton.appendTo(acell);
acell.appendTo(trow);
$("#datatable").append(trow);
}
}
//Summation
function sum() {
var txtFirstNumberValue = document.getElementById('B1').value;
var txtSecondNumberValue = document.getElementById('C1').value;
var txtThirdNumberValue = document.getElementById('D1').value;
var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('E1').value = result;
}
}
</script>
</head>
<body>
<h2><center>Sample Form</center></h2>
<h5><center>(Rule 23(1) & Rule 24(1))</center></h5>
<br/><br/>
<table border="0">
<tr>
<td><label for="name">Received from Shri:</label></td>
<td><input type="text" name="name" id="txtbox1" class="txtbox"> </td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input type="text" name="address" id="txtbox2" class="txtbox"> </td>
</tr>
<tr>
<td><label for="address">Email:</label></td>
<td><input type="text" name="email" id="txtbox3" class="txtbox"> </td>
</tr>
<tr>
<td><label for="mobileNo">Mobile No:</label></td>
<td><input type="text" name="mobile" id="txtbox4" class="txtbox"> </td>
</tr>
<tr>
<td> <label for="month">Month:</label></td>
<td><select name="month" id="H1">
<option>Select Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select></td>
<td><label for="year">Year:</label></td>
<td><select name="year" id="I1">
<option>Select Year</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select><td>
</tr>
<tr>
<td><label for="serviceName">Service Name:</label></td>
<td><select name="G1" id="G1">
<option>services</option>
</select></td>
</tr>
<tr>
<td><label for="details">Details:</label></td>
<td><input type="text" name="details" id="J1" class="txtbox" ></td>
</tr>
<tr>
<td><label for="tax">Tax:</label></td>
<td><input type="text" name="tax" id="B1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="cess">Cess:</label></td>
<td><input type="text" name="cess" id="C1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="penalty">Interest/Penalty:</label></td>
<td><input type="text" name="penalty" id="D1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="total">Total:</label></td>
<td><input type="text" name="total" id="E1" value="" class="txtbox" /></td>
</tr>
<td>
<input type="button" name="mybutton" class="addbutton" id="addbutton" value="Add">
</td>
</tr>
</table>
<br/>
<br/>
<br/><br/><br/>
<table id="datatable" class="contacts" border="1">
<thead>
<tr>
<td class="contactDept" colspan="13">Generated rows</td>
</tr>
</thead>
<tbody>
<tr class="contact_head">
<td>S.No.</td>
<td>Name</td>
<td>Address</td>
<td>Email</td>
<td>Mobile</td>
<td>Month</td>
<td>Year</td>
<td>Service</td>
<td>Details</td>
<td>Tax</td>
<td>Cess</td>
<td>Penalty</td>
<td>Total</td>
<!--<td><a href="#" >Edit</a></td>-->
</tr>
</tbody>
</table>
<br/>
<form id="myform" action="save/saveTable.action" method="post">
<input type="hidden" id="data" name="data">
<input type="submit" name="submitbutton" class="submitbutton" id="submitbutton" value="Submit Form">
</form>
Here when click on add, form values are displaying on the table. When click on submit button, I am passing the table(dynamically generated table) to some action class. Before submitting the table I have to perform edit operation. I have written a code for edit function but unable to edit. Please help me to solve..
You made a mistake in your var declaration.
For exemple, you have written mon = $tds.eq(1).text().trim();
It should be mon = $tds.eq(5).text().trim();
Because $tds.eq(1) is the name, not the month.
That's why
$('#H1 option').each(function () {
if ($(this).text().trim() == mon) {
$(this).prop('selected', true);
return false;
}
});
never appends.
Please see this working demo
UpDate 1 :
$('#datatable').on('click', 'td:last-child', function (e) {
var $tr = $(this).parent(),
$tds = $tr.children(),
name = $tds.eq(1).text().trim(),
adress = $tds.eq(2).text().trim(),
email = $tds.eq(3).text().trim(),
mobile = $tds.eq(4).text().trim(),
mon = $tds.eq(5).text().trim(),
year = $tds.eq(6).text().trim(),
service = $tds.eq(7).text().trim(),
details = $tds.eq(8).text().trim(),
tax = $tds.eq(9).text().trim(),
cess = $tds.eq(10).text().trim(),
penalty = $tds.eq(11).text().trim(),
sum = $tds.eq(12).text().trim();
...
The Currency converter up top works, but the table based one is a dead duck.
I need a value to be entered at Enter Amount of US Dollars and to be displayed in the corresponding value fields.
Here's the code:
<html>
<head>
<title>Convert US Dollars to Euros 2</title>
</head>
<body>
<form>
<table border="1">
<tbody>
<tr>
<th colspan="3">Monetary Exchange Rates
</th>
</tr>
<tr>
<th>Currency
</th>
<th>Rate
</th>
<th>Value
</th>
</tr>
<tr>
<td>British Pound
</td>
<td><input type="text" style="text-align: right;"
name="bp" value="0.62905" size="12" disabled="true" />
</td>
<td><input type="text" id="BP" value=""></td>
</tr>
<tr>
<td>Canadian Dollar
</td>
<td><input type="text" style="text-align: right;"
name="cd" value="0.98928" size="12" disabled="true" />
</td>
<td><input type="text" id="CD" value=""></td>
</tr>
<tr>
<td>Euro
</td>
<td><input type="text" style="text-align: right;"
name="eu" value="0.79759" size="12" disabled="true" />
</td>
<td><input type="text" id="EU" value=""></td>
</tr>
<tr>
<td>Japanese Yen
</td>
<td><input type="text" style="text-align: right;"
name="jy" value="78.5461" size="12" disabled="true" />
</td>
<td><input type="text" id="JY" value=""></td>
</tr>
<tr>
<td>Mexican Peso
</td>
<td><input type="text" style="text-align: right;"
name="mp" value="13.0729" size="12" disabled="true" />
</td>
<td><input type="text" id="MP" value=""> <!--
td-->
</td>
</tr>
<tr>
<td colspan="2"><b>Enter Amount of U.S. Dollars</b>
</td>
<td>
<input type="text" id="amount" name="amount" size="10" value="1" />
</td>
</tr></tbody>
</table> <br />
<input type="button" value="Calculate" onclick="calculate();">
<input type="reset" value="Reset" />
</form>
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
// var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
var select = document.getElementById("select");
var result = document.getElementById("result");
if(select.options[select.selectedIndex].value=="BP")
if (select.value === "USD to EUR") {
result.value = (amount * 0.7003).toFixed(2);
}
if (select.value === "EUR to USD") {
result.value = (amount * 1.4283).toFixed(2);
}
if (select.value === "0.62905") {
result.value = (amount * 0.62905).toFixed(2);
}
}
</script>
</body>
</html>
Any help would be greatly appreciated.
ID's should be unique, you cannot use same ID multiple times, and your select value does not work, change:
var select = document.getElementById("select");
to
var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
Having dropped the select, the script you're looking for is:
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
document.getElementById("BP").value = (amount * BP).toFixed(2);
document.getElementById("CD").value = (amount * CD).toFixed(2);
document.getElementById("EU").value = (amount * EU).toFixed(2);
document.getElementById("JY").value = (amount * JY).toFixed(2);
document.getElementById("MP").value = (amount * MP).toFixed(2);
}
</script>
We wouldn't want to list those out explicitly like that for anything large-scale; we'd build a list and iterate through it. But I think writing it out this way answers your immediate question better without muddying the waters for you.
Try this code
if(select.options[select.selectedIndex].value=="your value")