how i can get sum of balance amount of checked row?
I am not able to get event of checkbox and then column's value of that particular row.
Please help me out.
I got my Ans by my own
var grid = $("#amount_detail").data("kendoGrid");
grid.tbody.on("change", ".ob-paid", function (e) {
var row = $(e.target).closest("tr");
var item = grid.dataItem(row);
var balance_amount = item.balance_amount;
item.set("checkbox", $(e.target).is(":checked") ? 1 : 0);
if($(e.target).is(":checked")==1){
var t = ($("#tot_balance").val() * 1)+(balance_amount * 1);
$("#tot_balance").val(t);
}
else{
var t = ($("#tot_balance").val() * 1)-(balance_amount * 1);
$("#tot_balance").val(t);
}
I created a prototype on jsbin for you to check out. This should contain all of the necessary components to do what you're asking for. I am assuming the Kendo UI grid has an ID, so you would want to replace the selector that I have used with your grid's ID. However, the concept is essentially what you're looking for.
Assuming you have a grid with the id myTable, you would be able to do something like this:
<table id="myTable">
<thead>
<tr>
<th>
Select
</th>
<th>
Action
</th>
<th>
Action
</th>
<th>
Name
</th>
<th>
Unique ID
</th>
<th>
Format
</th>
<th>
Job #
</th>
<th>
Total Amount
</th>
<th>
Balance Amount
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
John Doe
</td>
<td>
12345
</td>
<td>
AIR CAN
</td>
<td>
Random Number 11122
</td>
<td>
1500
</td>
<td class="balance">
2340
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
Jane Doe
</td>
<td>
56789
</td>
<td>
LCL CAN
</td>
<td>
Random Number 14562
</td>
<td>
1300
</td>
<td class="balance">
1000
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
Jim Bob
</td>
<td>
82352
</td>
<td>
AIR CAN
</td>
<td>
Random Number 985613
</td>
<td>
600
</td>
<td class="balance">
800
</td>
</tr>
</tbody>
</table>
<br />
<p id="total">
</p>
You're JavaScript might look something like this:
$(document).ready(function(){
//Store the totals here.
var totals = [];
//Handle checkbox click.
$('#myTable input:checkbox').on('click', function(){
var sum = 0;//For adding the sum
//Get the cell with the balance in it.
var number = $(this).parentsUntil('tbody').find('.balance').text();
//Handle if checked
if ($(this).is(':checked')){
$(this).parentsUntil('tbody').addClass('highlight');
totals.push(parseInt(number));
}else{//Handle if not checked
$(this).parentsUntil('tbody').removeClass('highlight');
var idx = totals.indexOf(parseInt(number));
totals.splice(idx, 1);
}
for (var n = 0; n < totals.length; n++){
sum += totals[n];
}
$('#total').text(sum > 0 ? sum : "");
});
});
Please see the prototype for clarification on use and for a live demo of the code.
Hope this helps. :)
Related
Is there anyone here who thinks they can help me solve an estimate calculator issue?
The user clicks on different checkboxes which stores a price value and for each checkbox they click it adds a total price. I got that working. But I cant find a way to give the checkbox a range price to display to the user
like this
This is mine, i put in plane text the range, but the value is actually only the first portion of the range unfortunately and I'm not getting to display the range
This is what is the code i tried:
`
<p class = "dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id = "test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id= "engineRepair-form" class="price-form">
<table>
<tr>
<td class="services-row">
<input type="checkbox" name="array[]" id="oil" value="2126.15">
<label for="oil">Air Filter</label>
</td>
<td class = "price">
$2,126.15 - $2,622.25
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="gas" value="1063.08">
<label for="gas">Gas Filter</label>
</td>
<td class = "price">
$1,063.08 - $1,275.69
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="tires" value = "3614.46">
<label for="tires">Fuel Filter</label>
</td>
<td class = "price">
$3,614.46 - $4,394.05
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="sparkPlug" value = "5244.51">
<label for="sparkPlug">Spark Plug</label>
</td>
<td class = "price">
$5,244.51 - $6,449.33
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="belt_chain" value = "9355.07">
<label for="belt_chain">Timing Belt/Chain</label>
</td>
<td class = "price">
$9,355.07 - $1,1410.35
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="belt_drive" value = "3685.33">
<label for="belt_drive">Fan Belt/Drive Belt</label>
</td>
<td class = "price">
$3,685.33 - $4,323.18
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="radiatorHoseSet" value = "7228.92">
<label for="radiatorHoseSet">Radiator Hose Set</label>
</td>
<td class = "price">
$7,228.92 - $8,858.97
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="radiator" value = "27214.74">
<label for="radiator">Radiator</label>
</td>
<td class = "price">
$27,214.74 - $33,309.71
</td>
</tr>
</table>
</form>
`
Javascrip:
`
$(function() {
$('input').click(function() {
var total = 0;
$('input:checked').each(function(index, item) {
total += parseFloat(item.value);
});
$('#test').text(total.toFixed(2));
});
});
`
As you can see, the prices did add but it didn't display the range as showed in the first image I sent. It's supposed to display the total estimated price range
enter link description here
this is also the codepen
Here is this Answer
i used parentElement and NextSilbiling
$(function() {
$('input').click(function() {
var total1 = 0;
var total2 = 0;
$('input:checked').each(function(index, item) {
var items = item.parentElement.nextElementSibling.innerText.replace(/[$, ]/g,'').split("-");
total1 += Number(items[0]);
total2 += Number(items[1]);
});
$('#costOutput').text('$'+total1.toFixed(2)+' - '+ '$'+total2.toFixed(2));
});
});
https://bokboot.net/read?id=47&key=b3897fd0-315c-410d-ab2a-f61b8e8c4a4a
Copy and Paste in your project
First things first, please do not use the table tag for layout. It should be used for tabular data only. Its use for layout went out of style at the turn of the century!
Now, onto the problem at hand. As you've discovered, checkboxes can only have one value. We are going to leverage data attributes to give your more.
$(function() {
$('input').click(function() {
var minTotal = 0;
var maxTotal = 0
$('input:checked').each(function(index, item) {
//Add the value from the minval data attribute
minTotal += parseFloat(item.dataset.minval);
//Add the value from the maxval data attribute
maxTotal += parseFloat(item.dataset.maxval);
});
//Update the text field
$('#test').text("$" + minTotal.toFixed(2) + " - $" + maxTotal.toFixed(2) );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id="test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id="engineRepair-form" class="price-form">
<table>
<tr>
<td class="services-row">
<input type="checkbox" name="array[]" id="oil" data-minval="2126.15" data-maxval="2622.25" value="skuOil">
<label for="oil">Air Filter</label>
</td>
<td class="price">
$2,126.15 - $2,622.25
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" data-minval="1063.08" data-maxval="1275.69" id="gas" value="skuGas">
<label for="gas">Gas Filter</label>
</td>
<td class="price">
$1,063.08 - $1,275.69
</td>
</tr>
</table>
I'm trying to make a simple function where the user enters some inputs (only numbers) in a table. The inputs will be recalculated and return a new number in the table-row below. (There will be different calculations for each row, but if I can get some help figuring this first one out, I should be able to do the rest myself.)
The code below works for the first row, but it feels unnecessarily cumbersome. I think I should be able to just iterate through the values to get the output, instead of doing it manually. It really bugs me that I can't get it :(
I wish to onöy use vanilla js for this. Thanks!
HTML:
<!-- FORM 4-->
<form id="F3" class="form">
<table>
<caption>
<strong>Header</strong>
</caption>
<!-- Row-1 Table-4 -->
<tbody id="tb3">
<tr class="row1">
<th scope="row">Price 1</th>
<td>
<input type="number" id="r6c0" value="0" />
</td>
<td>
<input type="number" id="r6c1" value="0" />
</td>
<td>
<input type="number" id="r6c2" value="0" />
</td>
<td>
<input type="number" id="r6c3" value="0" />
</td>
<td>
<output class="any1"></output>
</td>
</tr>
<!-- Row-2 Table-4 -->
<tr class="output1">
<th scope="row">Price 2</th>
<td>
<output id="r7c0" class="any">7</output>
</td>
<td>
<output id="r7c1" class="any">6</output>
</td>
<td>
<output id="r7c2" class="any">5</output>
</td>
<td>
<output id="r7c3" class="any">4</output>
</td>
<td>
<output class="any1"></output>
</td>
</tr>
<!-- Row-3 Table-4 -->
<tr>
<th scope="row">Diff Prices (%)</th>
<td>
<output id="r8c0">8</output>
</td>
<td>
<output id="r8c1">0</output>
</td>
<td>
<output id="r8c2">0</output>
</td>
<td>
<output id="r8c3">0</output>
</td>
<td>
<output></output>
</td>
</tr>
<!-- Row-4 Table-4 -->
<tr>
<th scope="row">Win</th>
<td>
<output id="r9c0">9</output>
</td>
<td>
<output id="r9c1">0</output>
</td>
<td>
<output id="r9c2">0</output>
</td>
<td>
<output id="r9c3">0</output>
</td>
<td>
<output class="sum"></output>
</td>
</tr>
<!-- Row-5 Table-4-->
<tr>
<th scope="row">Loss</th>
<td>
<output id="r10c0">10</output>
</td>
<td>
<output id="r10c1">0</output>
</td>
<td>
<output id="r10c2">0</output>
</td>
<td>
<output id="r10c3">0</output>
</td>
<td>
<output class="sum"></output>
</td>
</tr>
</tbody>
</table>
</form>
JS:
const form = document.querySelector("#F3");
let f3 = form;
f3.onchange = editInput;
function editInput() {
const rowInput = document.querySelectorAll(".row1 input");
const anyRow = document.querySelector("#tb3").getElementsByClassName("any");
for (k = 0; k < anyRow.length; k++) {
for (i = 0; i < rowInput.length; i++) {
anyRow[0].innerHTML = rowInput[0].value - 1;
anyRow[1].innerHTML = rowInput[1].value - 1;
anyRow[2].innerHTML = rowInput[2].value - 1;
anyRow[3].innerHTML = rowInput[3].value - 1;
}
}
}
https://jsfiddle.net/battleaxe/0d4f5gvs/3/
You can utilize forEach with the index overload to get the same affect like this :
function editInput() {
const rowInput = document.querySelectorAll(".row1 input");
const anyRow = document.querySelector("#tb3").getElementsByClassName("any");
rowInput.forEach((i,ix)=>{anyRow[ix].innerHTML = i.value -1});
}
Fiddle
I have been tasked with coding some javascript to add a pizza to a 'basket'. I have a 'Add to Basket' button which needs to get the name, description, size and price of the pizza.
Currently, I have managed to get the name and description of the pizza from the 'Add to Basket' button but I also need to get the price and size of the pizza which is determined from what radio button the user selects.
The html code was given to me.
<td>
<table border="0" cellpadding="0">
<tbody>
<tr align="center">
<td>
<input id="size" name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
</td>
<td>
<input id="size" name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
</td>
<td>
<input id="size" name="Cheese" data-price="9.99" value="Large" type="radio">Large
</td>
</tr>
<tr align="center">
<td style="padding-top: 6px">£6.50</td>
<td style="padding-top: 6px">£8.50</td>
<td style="padding-top: 6px">£9.99</td>
</tr>
</tbody>
</table>
</td>
<td>
<input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>
Here is the javascript, I was also asked to convert the NodeList to an array and then filter through that array to get the radio button that is checked which I think I have done with the first two lines.
function addBasket(button) {
var nodes = [].slice.call(document.getElementsByName(name));
var radio = nodes.filter(function(el){return el.checked;})[0];
var pizzaname = button.name;
var pizzadesc = button.getAttribute('data-description');
var pizzaprice = radio.dataset.price;
}
Now I don't know how to get the 'data-price' and the 'value' (size of pizza) from the radio button.
You can use radio.getAttribute('data-price') to get the price of the pizza and radio.value to get the size of the pizza. Also note that you can avoid using [].slice.call by using [].filter.call on your NodeList.
var name = 'Cheese'
function addBasket(button) {
var nodes = document.getElementsByName(button.name)
var radio = [].filter.call(nodes, function(e) {
return e.checked
})[0]
var pizzaname = button.name
var pizzadesc = button.getAttribute('data-description')
var pizzasize = radio.value
var pizzaprice = radio.getAttribute('data-price')
console.log({
Name: pizzaname,
Description: pizzadesc,
Size: pizzasize,
Price: pizzaprice
})
}
<td>
<table border="0" cellpadding="0">
<tbody>
<tr align="center">
<td>
<input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
</td>
<td>
<input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
</td>
<td>
<input name="Cheese" data-price="9.99" value="Large" type="radio">Large
</td>
</tr>
<tr align="center">
<td style="padding-top: 6px">£6.50</td>
<td style="padding-top: 6px">£8.50</td>
<td style="padding-top: 6px">£9.99</td>
</tr>
</tbody>
</table>
</td>
<td>
<input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>
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!
Here I'm using JSP, JAVASCRIPT, HTML in Netbeans 6.9.1
<table id="table1" class="table table-bordered">
<tr>
<td>
<%= rs.getInt(1)%>
</td>
<td>
<%= rs.getString(2)%>
</td>
<td>
<%= rs.getString(3)%>
</td>
<td>
<%= rs.getString(4)%>
</td>
<td>
<%= rs.getString(5)%>
</td>
<td>
<%= rs.getInt(6)%>
</td>
<td>
<%= rs.getInt(7)%>
</td >
<td>
<input type="text" placeholder="Quantity" name="qty" id="qty1" oninput="subtotal(document.getElementById('qty1').value)">
</td>
<td>
<input type="text" name="sub">
</td>
</tr>
</table>
<script type="text/javascript">
var m = 0;
function subtotal(a){
var x= parseInt(document.getElementById("table1").rows[m].cells[5].innerHTML);
var y = parseInt(document.getElementById("table1").rows[m].cells[6].innerHTML);
var p = parseInt(a);
var z= x+y+p;
alert(z);
alert(m);
}
</script>
in the above code document.getElementById gives me data of first row the table, but for next iteration I want next rows data.
So I tried to put a javascript variable, but the it doesn't works.
In your example, you only have one table row.
But in case this is just an example and in your actual code, you have multiple rows, you just increase your variable m;
You can do this like this:
m++ at the end of your function,
or like this: m+=1. Like this, you can increase it by any amount you want.
Please check below code i have added one row and its working for two iteration. U need to check the condition depending on your rows.
<html>
<head>
<script>
var m = 0;
function subtotal(a){
var x= parseInt(document.getElementById("table1").rows[m].cells[5].innerHTML);
var y = parseInt(document.getElementById("table1").rows[m].cells[6].innerHTML);
var p = parseInt(a);
var z= x+y+p;
alert(z);
alert(m);
m++;
}
</script>
</head>
<body>
<table id="table1" class="table table-bordered">
<tr>
<td>
10
</td>
<td>
20
</td>
<td>
30
</td>
<td>
40
</td>
<td>
50
</td>
<td>
60
</td>
<td>
70
</td >
</tr>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td >
<td>
<input type="text" placeholder="Quantity" name="qty" id="qty1" oninput="subtotal(document.getElementById('qty1').value)">
</td>
<td>
<input type="text" name="sub">
</td>
</tr>
</table>
</body>
</html>