I am trying to calculate amount without VAT from a pre-calculated amount with VAT . The HTML form looks like :
<table>
<tr>
<th>Sl No</th>
<th>Description of goods</th>
<th>Price</th>
<th>VAT%</th>
<th>Price with VAT</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
{foreach name = feach item = k from = $ip key = ind}
<tr>
<td>{$ind+1}</td>
<td>{$k->brand},{$k->model}</td>
<td id="prd_prc"> </td>
<td id="vat{$ind}">
<select name="vatpc" id="vatpc" onchange="calculate('{$ind}')">
<option value="5">5</option>
<option value="13.5">13.5</option>
</select>
</td>
<td id="total_cost{$ind}">{$k->price}</td>
<td>{$k->quantity}</td>
<td>{$k->total_cost}</td>
</tr>
{/foreach}
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>Total Cost </td>
<td>{$final_amount}</td>
</tr>
</table>
And the JavaScript function is :
function calculate(idno)
{
//alert(idno);
var vat_pc = document.getElementById("vatpc").value;
var total_cost = document.getElementById("total_cost"+idno).value;
//total_cost = Number(total_cost);
alert(total_cost);
//vat_pc = parseFloat(vat_pc);
// = v + 2.10 + 11.25;
//alert(v);
// document.getElementById("total").innerHTML = "Total - amount : "+v+" USD";
}
But the alert shows undefined. I tried adding innerHTML,but results same. Please help. Thanks in advance
total_costX is a <td> element. Use the textContent property.
var total_cost = document.getElementById("total_cost"+idno).textContent;
There in nothing like value of dive. But you can get text or html inside dive. if you are using jquery, it should be quite simple:
$(document.getElementById("vatpc")).text();
//OR
$(document.getElementById("vatpc")).html();
Or jQuery's way
$("#vatpc").text();
//OR
$("#vatpc").html();
Related
Now im doing some Calculate Checkbox Value Using JQuery and PHP code. The mechanism is, when User checked the checkbox, it will sum the price. I implemented a formula for JQuery but the result it not correct. here is my code
JQUERY
<script>
$(function() {
$('.dealprice').on('input', function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
</script>
for more detail. i made a sample on this site https://repl.it/#ferdinandgush/Sum-Calculate-checkbox just click "run" button and you can able to test it. i need to display correct calculate following that table format
Please help.
You just have to define getItemPrice inside the loop, otherwise you are calculating it only once for the item that was clicked, instead of doing it for every item.
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>
</tr>
<tr>
<td class="tg-amwm" colspan="2">Total</td>
<td class="tg-0lax"><span id="totalDeal">0</span></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You have to put the getItemPrice inside of the function of where you get its checked. Please check the following code:
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
Also check this repl https://repl.it/repls/LavenderAgonizingRoot
I have a table that consists of tr and tds and I show the percentage of sold ticket in third td. the problem of this code is it generate a zero after each percentage, i think it is for br tag .
what should i do ?
here is my snippet :
$('table tbody tr').each(function() {
var $this = this,
td2Value = $('td:nth-child(2)', $this)
.html()
.trim()
.split(/\D+/);
$('span.result', $this).html(
$('td:nth-child(1)', $this)
.html()
.trim()
.split(/\D+/)
.map(function(v, i) {
return Math.round((td2Value[i] * 100 / v) || 0);
})
.join('<br>'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th>Avalable</th>
<!--available-->
<th>Sold</th>
<!--used-->
<th>Result</th>
</tr>
</thead>
<tr>
<td>30 <br/></td>
<!--available-->
<td>4 <br/></td>
<!--used-->
<td><span class="result"></span></td>
</tr>
<tr>
<td>20 <br/> 20 <br/></td>
<!--available-->
<td>6 <br/> 5 <br/></td>
<!--used-->
<td><span class="result"></span></td>
</tr>
</table>
The issue is because you're using html(), so there's an extra line added to the output which then gets evaluated in the calculation. Use text() instead:
$('table tbody tr').each(function() {
var $this = $(this),
td1Value = $this.find('td:nth-child(1)').text().trim().split(/\D+/),
td2Value = $this.find('td:nth-child(2)').text().trim().split(/\D+/);
$this.find('span.result').html(td1Value.map(function(v, i) {
return Math.round((td2Value[i] * 100 / v) || 0) + '%';
}).join('<br>'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th>Avalable</th>
<th>Sold</th>
<th>Result</th>
</tr>
</thead>
<tr>
<td>30 <br/></td>
<td>4 <br/></td>
<td><span class="result"></span></td>
</tr>
<tr>
<td>20 <br/> 20 <br/></td>
<td>6 <br/> 5 <br/></td>
<td><span class="result"></span></td>
</tr>
</table>
Note that I tidied up your logic a little too.
you are looping on content inside for first 2 you have numbers but for 3rd td, if you will debug you can see loop is doing one extra iteration.
Just put below line in map function before return statement :
console.log('>>>', td2Value[i],v,i);
Every time the toggle is clicked, all payments are getting replaced with new payments. My problem is how to maintain the payments of a particular index of every click and show at respective index. please help me out
here is my html
<tbody data-ng-repeat="invoice in relatedInvoices>
<tr>
<td class="td-bottom-border">
{{invoice.PayableCurrencyCode}} {{invoice.PayablePaidAmount | number: 2}}<br />
<small>
<a data-ng-click="isOpenPayablePayments[$index] = !isOpenPayablePayments[$index]; togglePayablePayments(invoice.PayableInvoiceId)">Paid</a>
</small>
</td>
</tr>
<tr data-ng-show="isOpenPayablePayments[$index]">
<td>
<table>
<thead>
<tr>
<th>Transaction Id</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="payment in payablePayments">
<td>{{payment.TransactionId}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Here is my javascript
var getPayments = function (invoiceId) {
paymentService.getPayments(invoiceId).then(function (paymentsResponse) {
return paymentsResponse.data;
});
};
$scope.togglePayablePayments = function(invoiceId) {
$scope.payablePayments = getPayments(invoiceId);
};
If I understood correctly, you want to have "payablePayments" for every invoice.
This is working: http://plnkr.co/edit/cj3jxZ?p=info
Try something like
// init at beginning
$scope.payablePayments = [];
$scope.togglePayablePayments = function(invoiceId) {
$scope.payablePayments[invoiceId] = getPayments(invoiceId);
};
and then
<tr data-ng-repeat="payment in payablePayments[invoice.PayableInvoiceId]">
Otherwise you overwrite the object for the preceding invoice.
I have a 6-column table. It has a dropdown menu so that viewers can select one of the four right-most columns (the "th"'s for those four columns are choiceA, choiceB, choiceC, choiceD). I want only the selected column to display; the other three non-selected columns would be hidden. The two left-most columns would always be visible.
i.e., The viewer would see only three columns in total (plus the dropdown of course). If she chooses, e.g., "Choice A, lbs" from the dropdown, the idea is to show the whole choiceA column and hide all the others.
I thought this would be a simple parent/child issue, but it has proved anything but simple. I have tried to map the dropdown options to the column heads for the choices
This is my jquery Code (bear in mind, I'm a beginner):
$(document).ready(function () {
$('#ddselect').change(function () {
var id = $(this).children(':selected').attr('id');
$('#' + id + '-sel').show().siblings('th.substance').hide();
$('.' + id + '-substance').show().not($('.' + id + '-substance')).hide();
});
});
This is the HTML:
<table>
<tr>
<th scope="col" align="left"></th>
<th scope="col"></th>
<th colspan="4" scope="col">
<select id='ddselect'>
<option class='ddselect' id="ChoiceA">ChoiceA, lbs</option>
<option class='ddselect' id="ChoiceB">ChoiceB, oz</option>
<option class='ddselect' id="ChoiceC">ChoiceC, oz</option>
<option class='ddselect' id="ChoiceD">ChoiceD, oz</option>
</select>
</tr>
<tr>
<th scope="col" align="left">Module</th>
<th scope="col" align="left">Units</th>
<th class='substance' id='ChoiceA-sel' scope="col">ChoiceA</th>
<th class='substance' id='ChoiceB-sel' scope="col">ChoiceB</th>
<th class='substance' id='ChoiceC-sel' scope="col">ChoiceC</th>
<th class='substance' id='ChoiceD-sel' scope="col">ChoiceD</th>
</tr>
<tr>
<td>type1</th>
<td>5,000</td>
<td class='ChoiceA-substance'>0</td>
<td class='ChoiceB-substance'>0</td>
<td class='ChoiceC-substance'>0</td>
<td class='ChoiceD-substance'>0</td>
</tr>
<tr>
<td>type2</th>
<td>545</td>
<td class='ChoiceA-substance'>288</td>
<td class='ChoiceB-substance'>8</td>
<td class='ChoiceC-substance'>9</td>
<td class='ChoiceD-substance'>0.2</td>
</tr>
<tr>
<td>type3</th>
<td>29</td>
<td class='ChoiceA-substance'>15</td>
<td class='ChoiceB-substance'>89</td>
<td class='ChoiceC-substance'>43</td>
<td class='ChoiceD-substance'>9.9</td>
</tr>
</tr>
I can show the right column head with the dropdown and hide the others, but cannot hide the "td"s that correspond to the hidden heads. (I would post a stack snippet, but the button is not appearing in my editor.)
Any ideas?
Let's break this down into a small sized example. It's better not to over complicate your code when you're working with concepts you don't fully grasp yet.
A good way to achieve what you want is to use common classes, and cross classes to pick and choose the right columns.
The code becomes much cleaner this way:
http://jsbin.com/megicegupa/1/edit?html,js,output
$('#sel').on('change', function () {
var val = $(this).val(),
target = '.' + val;
$('.choice').hide();
$(target).show();
});
<select id="sel">
<option value="one">1</option>
<option value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>5000</td>
<td class="choice one">100</td>
<td class="choice two">200</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">40</td>
<td class="choice two">90</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Side note: You have some <td> tags that are followed by </th> tags. Make sure to validate your HTML for errors.
According to your code while loading the page we can see both column names "Choice One" and "Choice Two". So it's better to hide the column name on page load.
$('#sel').on('change', function() {
var val = $(this).val(),
target = '.' + val;
$('.choice').hide();
$(target).show();
});
/*Add below code for showing column name accordingly to select box change
*/
$('.choice').hide();
if ($('#sel').val() == 'one') {
$('.one').show()
} else {
$('.two').show()
}
the text input filtering is working but i don`t know how to implement with category using combo box. the category is using by there age.
please help my to this task:(
this is my sample code
this is my view
<select>
<option>all age</option>
<option>16</option>
<option>18</option>
<option>20</option>
</select>
<input />
<table class="AvailableGroupLab availGrpLabs avalLabs">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>wewe</span>
</td>
<td>16</td>
</tr>
<tr>
<td><span>Melvin</span>
</td>
<td>18</td>
</tr>
<tr>
<td><span>Marvin</span>
</td>
<td>20</td>
</tr>
<tr>
<td><span>wewex</span>
</td>
<td>20</td>
</tr>
</tbody>
</table>
this is javascript
function filter(element) {
var $trs = $('.AvailableGroupLab tbody tr').hide();
var regexp = new RegExp($(element).val(), 'i');
var $valid = $trs.filter(function () {
return regexp.test($(this).find('td:first-child').text())
}).show();
$trs.not($valid).hide()
}
$('input').on('keyup change', function () {
filter(this);
})
The problem with you code is that you are comparing regexp with 1st child of tr, while you age is in 2nd child.
var $valid = $trs.filter(function () {
return regexp.test($(this).find('td:eq(1)').text())
// or
return regexp.test($(this).find('td:last-child').text())
}).show();
I hope this will help you.