How do I make this statement repeat a few times? I tried and it works for only the first row but the rest of the row cannot be executed.
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
<style>
body{
background-image: linear-gradient(to right,#FF7F50,#008080);
}
thead,
tfoot {
background-color: skyblue;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input,
tbody td:nth-child(7) input {
text-align: right;
}
tr:hover {
background-color: yellow;
}
td:last-of-type input {
background-color: silver;
}
tfoot,
tfoot input {
text-align: right;
}
tfoot td:last-of-type input {
font-size: 18pt;
}
table{
border-style: dashed;
border-width: medium;
border-color: #EEE8AA;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input{
background-color: tomato;
}
tbody td:nth-child(2) input{
background-color: #00FF7F;
}
tbody td:nth-child(3) input{
background-color: #EE82EE;
}
tbody td > select{
background-color: #FFA500;
}
</style>
</head>
<body>
<h1>Book Ordering System</h1>
<form method="post">
<table border="2">
<thead>
<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>
</thead>
<tfoot>
<tr>
<td colspan="5">
<input type="button" onclick="multiply();" value="Calculate Grand Total Price">
</td>
<td colspan="2">
<input type="text" name="grandTotal" id="grandTotal" value="0.00" readonly="readonly">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec6" id="sec6" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec7" id="sec7" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec8" id="sec8" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec9" id="sec9" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec10" id="sec10" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec11" id="sec11" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec12" id="sec12" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec13" id="sec13" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec14" id="sec14" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec15" id="sec15" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec16" id="sec16" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec17" id="sec17" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec18" id="sec18" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec19" id="sec19" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec20" id="sec20" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec21" id="sec21" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec22" id="sec22" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec23" id="sec23" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec24" id="sec24" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec25" id="sec25" value="0.00" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function multiply(){
let num1 = document.getElementById("sec3").value ;
let num2 = document.getElementById("sec4").value ;
document.getElementById("sec5").value = num1 * num2;
num1 = document.getElementById("sec8").value ;
num2 = document.getElementById("sec9").value ;
document.getElementById("sec10").value = num1 * num2;
num1 = document.getElementById("sec13").value ;
num2 = document.getElementById("sec14").value ;
document.getElementById("sec15").value = num1 * num2;
num1 = document.getElementById("sec18").value ;
num2 = document.getElementById("sec19").value ;
document.getElementById("sec20").value = num1 * num2;
num1 = document.getElementById("sec23").value ;
num2 = document.getElementById("sec24").value ;
document.getElementById("sec25").value = num1 * num2;
total = document.getElementById("sec5").value + document.getElementById("sec10").value + document.getElementById("sec15").value
+ document.getElementById("sec20").value + document.getElementById("sec25").value ;
document.getElementById("grandTotal").value = total;
}
</script>
</body>
</html>
How do I make this statement repeat a few times? I tried and it works for only the first row but the rest of the row cannot be executed. It only functions in the 1st row
i suggest you applying a reload button
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
try replacing your code with this:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
<style>
body{
background-image: linear-gradient(to right,#FF7F50,#008080);
}
thead,
tfoot {
background-color: skyblue;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input,
tbody td:nth-child(7) input {
text-align: right;
}
tr:hover {
background-color: yellow;
}
td:last-of-type input {
background-color: silver;
}
tfoot,
tfoot input {
text-align: right;
}
tfoot td:last-of-type input {
font-size: 18pt;
}
table{
border-style: dashed;
border-width: medium;
border-color: #EEE8AA;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input{
background-color: tomato;
}
tbody td:nth-child(2) input{
background-color: #00FF7F;
}
tbody td:nth-child(3) input{
background-color: #EE82EE;
}
tbody td > select{
background-color: #FFA500;
}
</style>
</head>
<body>
<h1>Book Ordering System</h1>
<form method="post">
<table border="2">
<thead>
<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>
</thead>
<tfoot>
<tr>
<td colspan="5">
<input type="button" onclick="multiply();" value="Calculate Grand Total Price">
</td>
<td colspan="2">
<input type="text" name="grandTotal" id="grandTotal" value="0.00" readonly="readonly">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec6" id="sec6" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec7" id="sec7" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec8" id="sec8" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec9" id="sec9" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec10" id="sec10" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec11" id="sec11" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec12" id="sec12" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec13" id="sec13" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec14" id="sec14" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec15" id="sec15" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec16" id="sec16" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec17" id="sec17" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec18" id="sec18" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec19" id="sec19" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec20" id="sec20" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec21" id="sec21" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec22" id="sec22" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec23" id="sec23" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec24" id="sec24" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec25" id="sec25" value="0.00" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function multiply(){
let total = 0;
let num1 = document.getElementById("sec3").value ;
let num2 = document.getElementById("sec4").value ;
document.getElementById("sec5").value = num1 * num2;
total += (num1 * num2);
num1 = document.getElementById("sec8").value ;
num2 = document.getElementById("sec9").value ;
document.getElementById("sec10").value = num1 * num2;
total += (num1 * num2);
num1 = document.getElementById("sec13").value ;
num2 = document.getElementById("sec14").value ;
document.getElementById("sec15").value = num1 * num2;
total += (num1 * num2);
num1 = document.getElementById("sec18").value ;
num2 = document.getElementById("sec19").value ;
document.getElementById("sec20").value = num1 * num2;
total += (num1 * num2);
num1 = document.getElementById("sec23").value ;
num2 = document.getElementById("sec24").value ;
document.getElementById("sec25").value = num1 * num2;
total += (num1 * num2);
document.getElementById("grandTotal").value = total;
}
</script>
</body>
</html>
EDIT: this should work by now
Related
I need to sum all the subtotals I got into a grand total. This is for an assignment that I need to submit in about 2 weeks. Here's my JS file:
function calculate_Total() {
for (i=1; i<=5; i++) {
const idName = "price_" + i;
const price = parseFloat(document.getElementById(idName).value);
const idQty= "qty_" + i;
const qty = parseFloat(document.getElementById(idQty).value);
const total = price*qty;
const idTotal = "total_" + i;
document.getElementById(idTotal).value = total.toFixed(2);
}
for (i=1; i<=5; i++) {
document.getElementById("grand_total").value = 0;
}
}
I want to do that when I click a button to calculate the grand total price. Here's the HTML file that shows the button just near the end of the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order a book!</title>
<link rel="stylesheet" href="CSS/book-order.css">
<script src="JS/book-order.js"></script>
<script></script>
</head>
<body>
<h1>Book Ordering System</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</label></th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" onchange="calculate_Total()" readonly /></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_2" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_2" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_2" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_3" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="qty" id="qty_3" min="0" value="0" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="total" id="total_3" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()" /></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_4" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_4" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_4" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_5" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_5" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_5" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()" /></td>
</tr>
</tbody>
<tfoot>
<td colspan="5">
<div style="text-align: right">
<button onclick="discount()">View Price After 10% discount</button>
<button onclick="calculate_Total();">Calculate Grand Total Price</button>
</div>
</td>
<td colspan="2">
<div style="text-align: right;">
<input type="number" name="grand_total" id="grand_total" value="0.00" readonly>
</div>
</td>
</tfoot>
</table>
<script src="js/book-order.js"></script>
</body>
</html>
How do I sum the sub-totals into a grand total? Any help would be appreciated, thank you.
After you correctly calculated all subtotals (first for loop) you assigned the values to a series of html elements (the ones with ID total_1, total_2, total_3, total_4, total_5).
That allows you to iterete them in your second for loop, accumulating the value of each subtotal to a grandTotal variable.
After the loop is over, you can assign the result to the html element with ID grand_total.
function calculate_Total() {
for (i=1; i<=5; i++) {
const idName = "price_" + i;
const price = parseFloat(document.getElementById(idName).value);
const idQty= "qty_" + i;
const qty = parseFloat(document.getElementById(idQty).value);
const total = price*qty;
const idTotal = "total_" + i;
document.getElementById(idTotal).value = total.toFixed(2);
}
let grandTotal = 0
for (i=1; i<=5; i++) {
grandTotal += parseFloat(document.getElementById("total_" + i).value)
}
document.getElementById("grand_total").value = grandTotal;
}
I am working on an assignment where I need to place in JavaScript into my HTML. I needed to make an auto-calculate feature that would display the answer on a grey input box which is read only. However, it just doesn't show, I needed to know if it is a problem with the coding.
Here's my JavaScript code:
function calculate_Total() {
document.querySelector('#total_1').value = parseFloat(price_1.value) * parseFloat(qty1.value);
}
const price_1 = document.querySelector('#price_1');
const qty_1 = document.querySelector('#qty_1');
price_1.addEventListener("keyup", (e) => calculate_Total());
qty_1.addEventListener("keyup", (e) => calculate_Total());
And here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order a book!</title>
<link rel="stylesheet" href="CSS/book-order.css">
<script src="JS/book-order.js"></script>
</head>
<body>
<form>
<h1>Book Ordering System</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</label></th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01"/></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" onchange="calculate_Total()" readonly /></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
</tbody>
<tfoot>
<td colspan="5">
<div style="text-align: right">
<button onclick="calculate();">Calculate Grand Total Price</button>
</div>
</td>
<td colspan="2">
<div style="text-align: right;">
<input type="number" name="grand_total" id="grand_total" value="0.00" readonly>
</div>
</td>
</tfoot>
</table>
</form>
<script src="book-order.js"></script>
</body>
</html>
Edit: I've changed the IDs for a bit, so this is to be ignored at the moment, but still when I type, it doesn't show according to this image.
The output in the grey input box is not showing.
As it has been said already, an element's id should be unique in a file. I'm sure there are better ways to achieve what you are trying to do. To make your code work without changing much of the code, all we need to do is to change element id's into classes and then attach event handlers to each of them.
function calculate_Total(elementIndex) {
document.querySelectorAll('.total_1')[elementIndex].value = parseFloat(price_1[elementIndex].value) * parseFloat(qty_1[elementIndex].value);
}
const price_1 = document.querySelectorAll('.price_1');
const qty_1 = document.querySelectorAll('.qty_1');
price_1.forEach((element, key) => {
element.addEventListener("keyup", e => calculate_Total(key));
});
qty_1.forEach((element, key) => {
element.addEventListener("keyup", e => calculate_Total(key));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order a book!</title>
<link rel="stylesheet" href="CSS/book-order.css">
</head>
<body>
<form>
<h1>Book Ordering System</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</label>
</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly/></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
</tbody>
<tfoot>
<td colspan="5">
<div style="text-align: right">
<button onclick="calculate();">Calculate Grand Total Price</button>
</div>
</td>
<td colspan="2">
<div style="text-align: right;">
<input type="number" name="grand_total" id="grand_total" value="0.00" readonly>
</div>
</td>
</tfoot>
</table>
</form>
</body>
</html>
In my HTML table I would like to hide a question and show this if a specific option is chosen in the dropdown. This works fine with the code below, but the table isn't formatted right (two <td> in the space of one)?
Demo (pick "Other type" at "Type")
How to fix this?
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style = 'display:block;';
} else {
document.getElementById('form1').style = 'display:none;';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>
Dont use block to display tr table element, just set style display to empty:
.style.display = '';
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style.display = '';
} else {
document.getElementById('form1').style.display = 'none';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>
The problem is, display:block for a tr element. Try this:
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style = 'display:table-row;';
} else {
document.getElementById('form1').style = 'display:none;';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>
The below table I want to change the input value for first row become value="1" onclick the copy button.
This value="1" when I entered manually and the value should repeat to the entire row when I click the copy button.
Note: I couldn't found any script regarding this to add the tried code.
Kindly comment below for further clarification.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
Copy this first value to the rest:
$(function() {
$(".btn-success").on("click", function(e) {
e.preventDefault(); // stop the link
var $inputs = $(this).closest("tr").find("input");
var val = $inputs.eq(0).val(); // take the first
$inputs.val(val);
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
You could do it like this:
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
This will take the value from the input associated with the link/button and put that value into the other input's on the same tr
Demo
$('.table a.btn').click(function() {
var inputVal = $(this).prev().val();
var td = $(this).closest("td");
var sib = td.siblings().find("input");
sib.val(inputVal)
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
You get the value of input using prev() inside click handler of the copy button.
Find parent td using closest and then get all its sibling tds. find input inside sibling tds and append first input value to the input existing values
$(document).ready(function(){
$('a.btn.btn-success').on('click', function(){
var val = $(this).prev('input').val();
var $td = $(this).closest('td');
var $siblings = $td.siblings();
//to append values
/*$siblings.find('input.form-control').each(function(){
$(this).val($(this).val() + val);
});*/
// to replace values
$siblings.find('input.form-control').val(val);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
This JS code could be helpful.
jQuery(document).ready(function($) {
jQuery('.table a.btn').click(function(event) {
event.preventDefault();
var fieldVal = jQuery(this).siblings('.form-control').val();
jQuery(this).parent('td').siblings('td').children('.form-control').val(fieldVal);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" value="1"> Copy</td>
<td>
<input type="text" class="form-control" value="11">
</td>
<td>
<input type="text" class="form-control" value="11">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="2"> Copy</td>
<td>
<input type="text" class="form-control" value="2">
</td>
<td>
<input type="text" class="form-control" value="2">
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" value="3"> Copy</td>
<td>
<input type="text" class="form-control" value="3">
</td>
<td>
<input type="text" class="form-control" value="3">
</td>
</tr>
</tbody>
</table>
In order to answer the question "Is it possible to place the button outside?":
Here is a version with the button in front of all the input fields:
Starting from the button itself (this) you look for the closest parent container of type td, then find all its siblings and their children of type input. The result is a jquery object with all the inputs of one table row. Then do the copying of values from the first (flds.eq(0)) to the rest of them all (flds.slice(1)).
$('.table a.btn').click(function() {
var flds = $(this).closest('td').siblings().find('input');
flds.slice(1).val(flds.eq(0).val());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table"><thead><tr>
<th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th>
</tr></thead><tbody><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="1">
</td><td>
<input type="text" class="form-control" value="11">
</td><td>
<input type="text" class="form-control" value="11">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td><td>
<input type="text" class="form-control" value="2">
</td></tr><tr><td>
Copy
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td><td>
<input type="text" class="form-control" value="3">
</td></tr></tbody></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);
}