Select elements within target div (row) on event jQuery - javascript

I have a table from which I need to select all of the values of the row after an event done in the same row (in this case is a keyup event) with jQuery. The table could have many rows but the selection has to be on the items of the row event.
This is the HTML of the table:
<table class="table" id="form-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Discount</th>
<th scope="col">Amount</th>
<th scope="col">Hidden</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<th scope="row">1</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" id="companySelect">
{% for product in product_options %}
<option>{{ product }}</option>
{% endfor %}
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control" id="qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control" id="price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" id="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
</tbody>
</table>
And looks like this on the site:
For more context: I am making a quote app in which I'll type the price and quantity of each item in each row and I need to update the "amount" column after each keyup. So I need to know how to select the proper "qty", "price", "discount" and "amount" id's of the row typed to do that.

Firstly, The id attribute is unique, So you should replace it with class like this
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
Secondly, You can get the tr by using .closest() like this $(this).closest("tr")
Finally, You can calculate individual row by creating another method named updateAmount_per_row like below:
function updateAmount_per_row(tr){
var qTy = getValue_by_className(tr, '.qty-column .qty');
var price = getValue_by_className(tr, '.price-column .price');
var amount = qTy * price;
tr.find('.amount-column').html(amount);
}
$(".qty-column, .price-column").on("keyup", function(){
var tr = $(this).closest("tr");
updateAmount_per_row(tr);
});
function updateAmount_per_row(tr){
var qTy = getValue_by_className(tr, '.qty-column .qty');
var price = getValue_by_className(tr, '.price-column .price');
var amount = qTy * price;
tr.find('.amount-column').html(amount);
}
function getValue_by_className(tr, className){
var value = parseInt(tr.find(className).val(), 10);
return value >= 0 ? value : 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="form-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Discount</th>
<th scope="col">Amount</th>
<th scope="col">Hidden</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<th scope="row">1</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" class="companySelect">
<option>Product A</option>
<option>Product B</option>
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" class="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
<tr id="row-2">
<th scope="row">2</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" class="companySelect">
<option>Product A</option>
<option>Product B</option>
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" class="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
</tbody>
</table>

Using Mai Phuong answer as testing I managed to make it work by using the target property instead of this, because this for some reason was referencing the whole document (#document).
Here is the keyup event listener:
$('.price, .qty, .discount').keyup((event) => {
let tr = event.target.closest('tr');
updateAmount(tr);
});
and here's the final updateAmount function:
function updateAmount(tr) {
let qty = $(tr).find('.qty').val();
let price = $(tr).find('.price').val();
let discount = $(tr).find('.discount').val();
let amount = (qty * price * (100 - discount)) / 100;
$(tr).find('.amount').html(amount);
}

Related

How to display the dynamic table data to another table using javascript

Iam trying to display multiple products to upload at once by using add product button, it displays the entire table to enter the product details. Here Iam facing the issue with add column option.
When I click on add grade option, columns are added successfully for one product, but if it comes for multiple products it will added to every table. So this is the 1st issue.
And secondly whatever the codes are entered in dynamic table were affected to packing list table.
Here is the code which I have tried.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
<style type="text/css">
input[type=text] {
width: 150px;
}
.form-group{
padding-bottom: 30px;
}
</style>
<style type="text/css">
.table-content {
padding: 20px;
}
.remove {
margin-left: 10px;
color: red;
}
.remove:hover {
cursor: pointer;
}
.form-control {
width: 90px;
}
</style>
<script>
$(document).ready(function(){
var max=2;
var x = 1;
$("#add_product").click(function(){
var html = '<div class="table-content"><div style="padding-bottom: 20px;"><button type="button" class="btn btn-primary add-row" style="margin-right: 10px;">Add Codes</button><button type="button" class="btn btn-info add-col">Add Grades</button></div><table class="table table-bordered table-hover table-sortable"><thead><tr><tr><th></th><th colspan="3" class="text-center">CODES</th><th class="text-center">GRADES</th></tr><tr><th>Delete code</th><th class="text-center">CODES</th><th class="text-center">PRODUCTION</th><th class="text-center">REGN NO</th><th class="text-center"><select name="grade1" id="grade1" class="form-control"><option value="0">Select</option><option value="13/15">13/15</option><option value="16/20">16/20</option><option value="21/25">21/25</option><option value="26/30">26/30</option><option value="31/40">31/40</option><option value="41/50">41/50</option><option value="51/60">51/60</option><option value="61/70">61/70</option><option value="71/90">71/90</option><option value="91/110">91/110</option></select></th><th id="total">TOTAL</th></tr></tr></thead><tbody><tr><td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></i></span></td><td><input type="text" name="codes[]" placeholder="CODES" class="form-control"/></td><td><input type="text" name="production[]" placeholder="production" class="form-control"/></td><td><input type="text" name="reg_no[]" placeholder="reg_no" class="form-control"/></td><td><input type="number" name="quantity1[]" class="form-control"/></td><td id="total1"><input type="number" placeholder="total" name="total[]" class="form-control"/></td></tr></tbody></table></div>';
if(x <= max){
$("#products").append(html);
x++;
}
});
$("#table_field").on('click','#remove',function(){
$(this).closest('tr').remove();
/*x--;*/
});
});
</script>
</head>
<body>
<div class="container">
<center>
<h1 style="padding-bottom: 50px;">CODE LIST</h1>
</center>
<form>
<div class="form-group">
<label class="control-label col-sm-2">Consignee</label>
<div class="col-sm-10">
<input type="text" name= "consignee" class="form-control" placeholder="Enter Consignee">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Exported TO</label>
<div class="col-sm-10">
<input type="text" name="exportedto" class="form-control" placeholder="Enter Exported TO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">PO</label>
<div class="col-sm-10">
<input type="text" name="po" class="form-control" placeholder="PO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Brand</label>
<div class="col-sm-10">
<input type="text" name="brand" class="form-control" placeholder="Enter Brand">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">INV NO</label>
<div class="col-sm-10">
<input type="text" name="invno" class="form-control" id="invno" placeholder="Enter INV NO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product">PRODUCT</label>
<div class="col-sm-10">
<input type="text" name="product" class="form-control" id="product" placeholder="Enter Product">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="packing">Type of Packing</label>
<div class="col-sm-10">
<input type="text" name="packing" class="form-control" id="packing" placeholder="Type of Packing">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<button id="add_product" type="button" class="btn btn-warning">Add Product</button>
</div>
</div>
<div id="products">
<div class="table-content">
<div style="padding-bottom: 20px;">
<button type="button" class="btn btn-primary add-row" style="margin-right: 10px;">Add Codes</button>
<button type="button" class="btn btn-info add-col">Add Grades</button>
</div>
<table class="table table-bordered table-hover table-sortable">
<thead>
<tr>
<tr><th></th><th colspan="3" class="text-center">CODES</th><th class="text-center">GRADES</th></tr>
<tr>
<th>Delete code</th>
<th class="text-center">
CODES
</th>
<th class="text-center">
PRODUCTION
</th>
<th class="text-center">
REGN NO
</th>
<th class="text-center">
<select name="grade1" id="grade1" class="form-control">
<option value="0">Select</option>
<option value="13/15">13/15</option>
<option value="16/20">16/20</option>
<option value="21/25">21/25</option>
<option value="26/30">26/30</option>
<option value="31/40">31/40</option>
<option value="41/50">41/50</option>
<option value="51/60">51/60</option>
<option value="61/70">61/70</option>
<option value="71/90">71/90</option>
<option value="91/110">91/110</option>
</select>
</th>
<th id="total">TOTAL</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></i></span></td>
<td>
<input type="text" name='codes[]' placeholder='CODES' class="form-control"/>
</td>
<td>
<input type="text" name='production[]' placeholder='production' class="form-control"/>
</td>
<td>
<input type="text" name='reg_no[]' placeholder='reg_no' class="form-control"/>
</td>
<td>
<input type="number" name="quantity1[]" class="form-control"/>
</td>
<td id="total1">
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
</tr>
</tbody>
</table>
</div>
<div id="packing-list">
<h4 style="color: red">Packing List</h4>
<table class="table table-bordered table-hover table-sortable" id="packing-list">
<thead>
<tr>
<tr>
<th>S.No</th>
<th class="text-center">
DAY CODE
</th>
<th class="text-center">
SOURCE CODE
</th>
<th class="text-center">
HON QTY IN Kgs
</th>
<th class="text-center">
USED QTY IN Kgs
</th>
<th class="text-center">AFTER HEAD LESS IN Kgs</th>
<th class="text-center">
PEELING IN Kgs
</th>
<th class="text-center">
SOAK OUT IN Kgs
</th>
<th class="text-center">
FINISH PRODUCT IN Kgs
</th>
<th class="text-center">
FINISH PRODUCT IN M/c
</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name='codes[]' placeholder='CODES' class="form-control"/>
</td>
<td>
<input type="text" name='production[]' placeholder='production' class="form-control"/>
</td>
<td>
<input type="text" name='reg_no[]' placeholder='reg_no' class="form-control"/>
</td>
<td>
<input type="number" name="quantity1[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
</tr>
<tr>
<th colspan="4" class="text-center">TOTAL</th>
<th>Total 1</th>
<th>Total 2</th>
<th>Total 3</th>
<th>Total 4</th>
<th>Total 5</th>
<th>Total 6</th>
</tr>
<tr>
<th colspan="5" class="text-center">YEILD %</th>
<th>%</th>
<th>%</th>
<th>%</th>
<th>%</th>
<th>%</th>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
<!-- <center>
<input type="submit" class="btn btn-success" name="codelist" id="save" value="submit">
</center> -->
</body>
<script type="text/javascript">
// we're binding a lot of different click event-handlers to this element
// there's no point looking it up every time we do so:
var body = $('body');
// binding the click event for the add-row button:
body.on('click', 'button.add-row', function() {
// getting the relevant <table>:
var table = $(this).closest('div.table-content'),
// and the <tbody> and <thead> elements:
tbody = table.find('tbody'),
thead = table.find('thead');
// if the <tbody> has children:
if (tbody.children().length > 0) {
// we find the last <tr> child element, clone it, and append
// it to the <tbody>:
tbody.find('tr:last-child').clone().appendTo(tbody);
} else {
// otherwise, we create the basic/minimum <tr> element:
var trBasic = $('<tr />', {
'html': '<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></span></td><td><input type="text" class="form-control" /></td>'
}),
// we find the number of columns that should exist, by
// looking at the last <tr> element of the <thead>,
// and finding out how many children (<th>) elements it has:
columns = thead.find('tr:last-child').children().length;
// a for loop to iterate over the difference between the number
// of children in the created trBasic element and the current
// number of child elements of the last <tr> of the <thead>:
for (var i = 0, stopWhen = columns - trBasic.children.length; i < stopWhen; i++) {
// creating a <td> element:
$('<td />', {
// setting its text:
'text': 'static element'
// appending that created <td> to the trBasic:
}).appendTo(trBasic);
}
// appending the trBasic to the <tbody>:
tbody.append(trBasic);
}
var table = $(this).closest('div.packing-list'),
// and the <tbody> and <thead> elements:
tbody = table.find('tbody'),
thead = table.find('thead');
// if the <tbody> has children:
if (tbody.children().length > 0) {
// we find the last <tr> child element, clone it, and append
// it to the <tbody>:
tbody.find('tr:last-child').clone().appendTo(tbody);
} else {
// otherwise, we create the basic/minimum <tr> element:
var trBasic = $('<tr />', {
'html': '<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></span></td><td><input type="text" class="form-control" /></td>'
}),
// we find the number of columns that should exist, by
// looking at the last <tr> element of the <thead>,
// and finding out how many children (<th>) elements it has:
columns = thead.find('tr:last-child').children().length;
// a for loop to iterate over the difference between the number
// of children in the created trBasic element and the current
// number of child elements of the last <tr> of the <thead>:
for (var i = 0, stopWhen = columns - trBasic.children.length; i < stopWhen; i++) {
// creating a <td> element:
$('<td />', {
// setting its text:
'text': 'static element'
// appending that created <td> to the trBasic:
}).appendTo(trBasic);
}
// appending the trBasic to the <tbody>:
tbody.append(trBasic);
}
});
body.on('click', 'span.remove-row', function() {
$(this).closest('tr').remove();
});
body.on('click', 'span.remove-col', function() {
// getting the closest <th> ancestor:
var cell = $(this).closest('th'),
// getting its index with jQuery's index(), though
// cell.prop('cellIndex') would also work just as well,
// and adding 1 (JavaScript is zero-based, CSS is one-based):
index = cell.index() + 1;
// finding the closest <table> ancester of the <th> containing the
// clicked <span>:
cell.closest('table')
// finding all <td> and <th> elements:
.find('th, td')
// filtering that collection, keeping only those that match
// the same CSS-based, using :nth-child(), index as the <th>
// containing the clicked <span>:
.filter(':nth-child(' + index + ')')
// removing those cells:
.remove();
});
body.on('click', 'button.add-col', function() {
// finding the table (because we're using it to find both
// the <thead> and <tbody>:
var table = $(this).closest('div.table-content').find('table'),
thead = table.find('thead'),
// finding the last <tr> of the <thead>:
lastTheadRow = thead.find('tr:last-child'),
tbody = table.find('tbody');
att = table.find('#total');
// creating a new <th>, setting its innerHTML to the string:
$('<th>', {
'html': '<select name="grade1" id="grade1" class="form-control pull-left"><option value="0">Select</option><option value="13/15">13/15</option><option value="16/20">16/20</option><option value="21/25">21/25</option><option value="26/30">26/30</option><option value="31/40">31/40</option><option value="41/50">41/50</option><option value="51/60">51/60</option><option value="61/70">61/70</option><option value="71/90">71/90</option><option value="91/110">91/110</option></select><span class="pull-left remove remove-col"><i class="glyphicon glyphicon-trash"></span>'
// appending that created <th> to the last <tr> of the <thead>:
}).insertBefore(att);
// creating a <td>:
$('<td>', {
// setting its text:
'html': '<input type="number" name="quantity1[]" class="form-control"/>'
// inserting the created <td> after every <td> element
// that is a :last-child of its parent:
}).insertBefore('td:last-child');
});
</script>
</html>

sum the values of input fields on keyup [duplicate]

This question already has answers here:
How to add two strings as if they were numbers? [duplicate]
(20 answers)
Closed 3 years ago.
I want to add all input fields values. Some of the fields are constant and some too you have to click on a button to add them and calculate the values.
The add button when clicked adds the input fields correctly but the calculation of all the values is the problem.
$(document).on("keyup", ".price", function() {
var closestParent = $(this).closest('tr');
var total = closestParent.find(".price").val();
var tuition = document.getElementById("tuition").value;
var pta = document.getElementById("pta").value;
var transport = document.getElementById("transport").value;
var totals = parseInt(total);
var t = 0;
$('.price').each(function(i, e) {
var amt = $(this).val() - 0;
var z = t += amt;
var totalz = z + tuition + transport + pta;
document.getElementById("tot").value = tuition;
console.log(t);
console.log(tuition)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 60%;">
<h5>Tuition Fees </h5>
</td>
<td>
<input class="form-control" id="tuition" name="tuition_fees" type="text" placeholder="Enter Tuition Fees..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>PTA Dues </h5>
</td>
<td>
<input class="form-control" id="pta" name="PTA_dues" type="text" placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>Transport Fares </h5>
</td>
<td>
<input class="form-control" id="transport" name="transport_fares" type="text" placeholder="Enter Transport Fare..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td colspan="2">
<h5>Additional Fees </h5>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover table-striped" id="invoiceItem">
<tbody>
<tr>
<td style="width: 60%;">
<div class="row">
<div class="col-md-1"><input class="itemRow" type="checkbox"></div>
<div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control price" autocomplete="off"></div>
</div>
</td>
<td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control" autocomplete="off"></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
<button class="btn btn-success" id="addRows" type="button">+ Add item</button>
</div>
</div>
<br/>
<table class="table table-bordered">
<tr>
<td style="width:60%;">
<h5>TOTAL FEES </h5>
</td>
<td><input class="form-control" id="tot" name="total_fees" type="text" placeholder="total fees" value="" style="border:none;" /></td>
</tr>
</table>
What I want to do is get the total summation of the values in the total fees input field
parse your textbox values using parseInt. then you are redefining t everytime so I edited it. then move your class name price from enter fee name to enter amount textbox.
$(document).on("keyup",".price",function(){
var closestParent = $(this).closest('tr');
var total = parseInt(closestParent.find(".price").val());
var tuition = parseInt(document.getElementById("tuition").value);
var pta = parseInt(document.getElementById("pta").value);
var transport = document.getElementById("transport").value;
var totals = parseInt(total);
var t = 0;
$('.price').each(function(i,e){
var amt =$(this).val()-0;
t += amt;
var z = t;
var totalz = z + tuition + transport + pta;
document.getElementById("tot").value=tuition;
console.log(t);
console.log(tuition)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody>
<tr>
<td style="width: 60%;">
<h5>Tuition Fees </h5>
</td>
<td>
<input class="form-control" id="tuition" name="tuition_fees" type="text"
placeholder="Enter Tuition Fees..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>PTA Dues </h5>
</td>
<td>
<input class="form-control" id="pta" name="PTA_dues" type="text"
placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>Transport Fares </h5>
</td>
<td>
<input class="form-control" id="transport" name="transport_fares" type="text"
placeholder="Enter Transport Fare..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td colspan="2" >
<h5>Additional Fees </h5>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover table-striped" id="invoiceItem">
<tbody>
<tr>
<td style="width: 60%;"><div class="row">
<div class="col-md-1"><input class="itemRow" type="checkbox"></div>
<div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control" autocomplete="off"></div></div></td>
<td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control price" autocomplete="off"></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
<button class="btn btn-success" id="addRows" type="button">+ Add item</button>
</div>
</div>
<br/>
<table class="table table-bordered">
<tr>
<td style="width:60%;" >
<h5>TOTAL FEES </h5>
</td>
<td><input class="form-control" id="tot" name="total_fees" type="text"
placeholder="total fees" value="" style="border:none;" /></td>
</tr>
</table>

Calculate load based on value return 0 or NaN

User will enter three values quantity, load, duration and then click on total button to show the multiplication in the watt hour textbox. But I always ended up getting a 0 or NaN.I tried with input type="number" but always getting the same result. Here is the code:
$(document).ready(function() {
var quantityval = parseInt($("#quantity").text(), 10);
var wattsval = $("#wattage option:selected").val();
var duration = parseInt($("#duration_use").text(), 10);
$("#total").click(function() {
var totalval = (quantityval * wattsval) * duration;
$("#watt-hour").val(totalval);
console.log($("#watt_hour").val(totalval));
});
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>
Multiple issues here,
use val instead of text
directly take the value of select instead of its option
Put the fetch of values in the click event
use watt_hour instead of watt-hour while setting value.
Make it
var quantityval = +$("#quantity").val();
var wattsval = +$("#wattage").val();
var duration = +$("#duration_use").val();
Note
parseInt is fine, I am simply putting unary + for keeping it short.
Demo
$(document).ready(function() {
$("#total").click(function() {
var quantityval = +$("#quantity").val();
var wattsval = +$("#wattage").val();
var duration = +$("#duration_use").val();
console.log(quantityval, wattsval, duration);
var totalval = (quantityval * wattsval) * duration;
console.log(quantityval, wattsval, duration, totalval);
$("#watt_hour").val(totalval);
console.log($("#watt_hour").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>
Replace .text() with .val() and retrive all the values inside the click event handle
$(document).ready(function() {
$("#total").click(function() {
var quantityval = parseInt($("#quantity").val(), 10);
var wattsval = $("#wattage option:selected").val();
var duration = parseInt($("#duration_use").val(), 10);
var totalval = (quantityval * wattsval) * duration;
console.log(totalval)
$("#watt_hour").val(totalval);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>

input boxes value of table should not be greater then input box outside of table

Hello I have developed a form where input boxes value of table should not be greater then input box outside of table.
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
in above jsfiddle all ENTER SANCTIONED SEATS sum will not be greater then "Enter total number of sanctioned seats" in onchange.
You need to use jquery keyup event as I mentioned in fiddle.
Please check this fiddle
Here I just made textbox value blank if sum of three sanctioned seats are greater than total.
Also i have cleare 3 textbox if you chane total textbox
Open this link : https://jsfiddle.net/5y6na3wr/7/
$(document).ready(function(){
$(".seats").on('keyup',function(){
var total = parseInt(0) ;
$( ".seats" ).each(function( index ) {
if($(this).val()){
total = total + parseInt($(this).val());
}
});
if(total > $("#sanctionedSeatsSummary").val()){
alert("total sanctioned Seats are greater then given sanctioned Seats");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
check below snippet
$(document).ready(function(){
var ttl, val;
$("input[name=seats]").on('keyup', function(){
val = 0;
$("input[name=seats]").each(function(){
if(parseInt($(this).val().trim()) > 0)
val += parseInt($(this).val().trim());
});
ttl = parseInt($("#sanctionedSeatsSummary").val().trim());
if(val > ttl)
alert("your alert");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

Do SUM of Dynamic row added by innerHTML method through javascript

I am trying to do Sum on oninput method. Means as the button press the function will be called and show sum of two input in a paragraph <p> tag.
I have my javascript function like this:
quote:function(){
var button = document.getElementById('insert');
var table = document.getElementById('table');
$("#insert").click(function(){
var position=Math.round(table.rows.length - 3);
var row = table.insertRow(position);
var i=1;
row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input type="text" name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input type="text" name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
$("#remCF").live('click',function(){
$(this).parent().parent().remove();
});
});
},
After append it looks like this.
I would like to calculate Total Amount using quantity * price.
But i am not able to do that. It seems like Rows are appending fine. But when i try to call the function i am unable to specify the text are in the myFunction.
here is how myFuntion looks like:
function myFunction(place, event) {
var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
var z=x*y;
document.getElementById(place).innerHTML = z;
}
I would like to perform calculation row wise.
And if for reference if you want to know how my HTML looks then here is how it looks like.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th style="width:7%;">
Qty
</th>
<th style="width:50%;">
Description
</th>
<th style="width:10%;">
Unit Price
</th>
<th style="width:10%;">
Discount(Rs/$)
</th>
<th style="width:10%;">
Discount%
</th>
<th style="width:7%;">
Total
</th>
<th style="width:2%;">
Taxed
</th>
<th style="width:2%;">
Action
</th>
</tr>
</thead>
<tbody id="table">
<tr class="odd gradeX" id="p_scents" name="p_scnt">
<td>
<input type="integer" name="qty[]" class="form-control" value="1" id="myInput1" oninput="myFunction('demo', event)" >
</td>
<td>
<input type="text" name="discription[]" class="form-control">
</td>
<td>
<input type="text" name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
</td>
<td>
<input type="text" name="discount[]" class="form-control" placeholder="0.00">
</td>
<td>
<input type="text" name="discountper[]" class="form-control" placeholder="0.00%">
</td>
<td>
<p id="demo"></p>
</td>
<td>
<div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
</td>
<td></td>
</tr><!-- to add new column -->
<tr>
<td colspan="4" >
<div align="right">
<b>Sub Total:</b>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" >
<a id="insert">Add a New Service</a><br>
<a id="ajax-demo" data-toggle="modal">
Predifined Services </a><td>
</tr>
</tbody>
</table>
here is the Jsfiddle link:
https://jsfiddle.net/5xaaneor/2/
Thank you!

Categories