Something really strange is happening to my checkboxes checked in my table.
I have built an Invoice calculator in a Table, you can see it here and my purpose is that once i check the inputs ( Iva or Irpef) automatically they are not calculated in the Total Amount.
As you can see in the example i have linked, if you check the Irpef Input checkbox, it works well, the Irpef is not calculated in the Total Amount. The problem is that it does not happen the same with my Input Checkbox IVA, why? The code is exactly the same.
When i try just to make them working separately, it's fine, both work well, so it looks like that they can not work together, it might be? What'happening? I need your help on this issue.
thanks
Here the code related to the issue:
function tally(selector) {
var total = 0;
$('p.editable_number').each(function() {
total += parseInt($(this).text()) || 0;
$('#subtotal').html(total);
if($("#iva").is(':checked')){
$('#subtotal').html((total).toFixed(2));
$('#total').html((total*0.00).toFixed(2));
$('#total1').html((total*0.15).toFixed(2));
$('#total2').html((total*0.85).toFixed(2));
}
else {
$('#subtotal').html((total).toFixed(2));
$('#total').html((total*0.21).toFixed(2));
$('#total1').html((total*0.15).toFixed(2));
$('#total2').html((total*1.06).toFixed(2));
}
if($("#irpef").is(':checked')){
$('#subtotal').html((total).toFixed(2));
$('#total').html((total*0.21).toFixed(2));
$('#total1').html((total*0.00).toFixed(2));
$('#total2').html((total*1.21).toFixed(2));
}
else {
$('#subtotal').html((total).toFixed(2))
$('#total').html((total*0.21).toFixed(2));
$('#total1').html((total*0.15).toFixed(2));
$('#total2').html((total*1.06).toFixed(2));
}
})
}
$('#irpef').change(function() {
tally('p#subtotal');
tally('p#total');
});
$('#iva').change(function() {
tally('p#subtotal');
tally('p#total');
});
Try this one, should be fine now. I think you were trying to do an else if and do everything a couple of times instead of once (each function). refreshed
I added variables to keep track of the total/subtotal and vat/irpf.
each() goes through all the p.editable_number elements, so you were executing the same code a couple of times, every time overwriting the previous results, you get the right thing because it's the end loop that counted. Now you are just getting the values once and then calculating the relevant subtotal, vat, irpf and total values(based on the condition of vat or irpf being checked or not).
Related
I have the following code
$('input[name="select-all"]').click(function() {
//channel-data is initialised as DataTable
$('#channel-table').find('input[name="batch-select"]:checked').each(function () {
$(this).prop("checked",true);
});
});
whenever I click the select all button in any page other than 1st The datatable keeps reverting back to the first page.
I think it happens because of redraw due to change in checkboxes property.Any work around this?
Yes, probably - but have not seen any reason for test your hypothesis :) When dealing with dataTables, always go through the API! There is a neat every() method you can use to cycle through all rows and update a checkbox as checked. Here is an example, have tried to reproduce your setup with a "select all" button and checkboxes :
$('input[name="select-all"]').click(function() {
table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
var $tr = this.nodes().to$()
$tr.find('input[name="batch-select"]').prop('checked', true)
})
})
demo -> http://jsfiddle.net/u9Lq56v1/
does not change page
does actually update checkboxes also on hidden pages (that would the code in OP fail as well)
I am trying to keep count of how many times the check boxes have been clicked on my site, the check boxes are used for filters (for men, women, age, etc).
At the moment I have this code
jQuery('[id^="checkbox"] input').each(
function (index, element) {
jQuery(this).click(
function () {
console.debug("Hello");
}
);
}
);
Which will count (in console) how many times a check box has been click (with an id starting with checkbox), but because the page refreshes the information (and url) with each click, it will only count the first click, and the rest will not be counted.
Is there anyway to carry on counting after the page has been refreshed?
Thanks
To have a persistent count of all checkboxes being checked across all users, you need to have a central total which all counts update. This will be quite tricky for even large sites like YouTube still struggle with this (although to a lesser extent).
I am unaware that this can be accomplished purely in JS (if anyone knows, please edit this answer) and you will likely need some sort of back-end code.
One approach you could take would be:
update a local total of checked checkboxes on click
set a timer of 1/2 seconds on click
once the timer ends, send an ajax request to a back-end page
back-end page receives the update, update the central total
There are many other approaches you could take. You're likely to run into issues like, the central total might not be very accurate (if ajax requests are interrupted) and your bandwidth usage increasing due to the ajax requests.
Gennady Dogaev shared some really good code which posts the id of the checkbox and it's value to another page. This page would likely have the logic to update a database or something similar to track which checkboxes are being used.
<body>
<input type="checkbox" id="check_1" /> 1
<input type="checkbox" id="check_2" /> 2
<input type="checkbox" id="check_3" /> 3
</body>
$(function(){
$("input[type=checkbox]").click(function(){
var box = $(this);
var data = {
id: box.prop('id'),
checked: box.is(':checked')
};
$.get('https://stackoverflow.com/', data).always(function(response){
console.log('server responded', response);
/*Click registered, do what you want here*/
});
});
});
https://jsfiddle.net/nrLpxLuf/
The below answer was to help count all checked checkboxes on the page and update the total locally. I've left it here for reference.
You don't need to loop over all elements to attach a single click event to all of them.
Instead attach a click event to a collection of checkboxes and then update a total variable from within the click function.
var $inputs = $('[id^="checkbox"] input');
var total = $inputs.filter(':checked').length; //this will be 0 if none are found
$inputs.on('click', function(event) {
if($(this).is(':checked')) {
total++;
} else {
total--;
}
console.log(total);
});
If you only want to see if it has been clicked, just add to the total.
You need to set value on load if you want to count the checked after refresh.
var total = 0;
$(document).ready(function (event) {
//onload count for the checked checkboxes and set total value
total = $('[id^="checkbox"] input:checked').length;
$('[id^="checkbox"] input').on('click', function (event) {
$(this).prop('checked') ? total++ :total--;
});
});
I am using jquery to gather data from a dynamically created table via Jquery. I am able to get the data, but now I want to sum up the fields and put the result inside a text field or label etc dynamically when I press enter. I am using the following code:
$("#iq").keypress(function(e)
{
if(e.which==13)
{
var tot=0;
$('#tab .itemtotal').each(function()
{
tot = tot + parseInt($(this).html());
});
$("#totalamount").val(tot);
}
});
My problem is that the value showing in the textfield is zero or NaN for the first time and after that its calculating correctly. I used the same code and associating it with a button and checking its click event and its working properly and showing first item also.
Any suggestions? If need some more clarification let me know. Thanks in advance.
I'm creating a form to input an invoice with dynamically added rows (as seen in this image)
I'm using jquery 1.6.2 to calculate Line Total, sum all Line Totals, calculate Tax and display Total. The problem that I'm having is that calculating Line Total only works for the first added row. As you can see on the image above, the first row (Item 1), is fine (2*30=60), but the second row (Item 2) shows the same total as the first one (it should be 4*100=400). Here's the code for this part:
<script type="text/javascript">
var $k = jQuery.noConflict();
$k(function (){
$k('#item_form').live("keyup", "input[name^=linetotal]", function() {
var quantity = $k('input[name^=quantity]').val();
var unitprice = $k('input[name^=unitprice]').val();
$k('input[name^=linetotal]').val(quantity*unitprice);
var sum = $k('input[name^=linetotal]').sum();
$k('#subtotal').val(sum);
$k('#tax').val(Math.round(sum*10*100)/100);
$k('#total').val(Math.round((sum+Math.round(sum*10*100)/100)*100)/100);
});
});
</script>
Any ideas about what should I try? Thank you all!
You are using $k(input[name^=quantity]').val(); to grab the quantity/unitprice, but this grabs all quantity/unitprice inputs, and .val() gets the value of the first one.
You need to get the one on the same line, although it is odd that you are waiting for keyup on the linetotal. Wouldn't you want keyup on quantity and unitprice?
$k('input[name^=quantity], input[name^=unitprice]').live("keyup", function() {
var quantity = parseFloat($k(this).parent().find('input[name^=quantity]').val());
var unitprice = parseFloat($k(this).parent().find('input[name^=unitprice]').val());
$k(this).siblings('input[name^=linetotal]').val(quantity*unitprice);
var sum = $k(this).siblings('input[name^=linetotal]').sum();
$k('#subtotal').val(sum);
$k('#tax').val(Math.round(sum*10*100)/100);
$k('#total').val(Math.round((sum+Math.round(sum*10*100)/100)*100)/100);
});
});
Basic jsfiddle demo: http://jsfiddle.net/jtbowden/YxJCF/
I believe this is due it taking the first input[name^quantity] and first input[name^unitprice] it runs across. Since both rows have the same names, you have to scope your code to make sure it only pulls from its own row and not from others. Does that make sense?
I am trying to add javascript validation to a bunch of check boxes, basically what I want is as soon as the user has selected 3 tickboxes, it should disable all of the tickboxes except the three that were ticked.
How could I go about doing that?
Thanx in advance!
The following will disable the rest of the checkboxes if you select 3 of them, and also enable them once you uncheck one of the three selected..
$(':checkbox').click(
function(){
var selected = $(':checkbox:checked').length;
if (selected == 3)
{
$(':checkbox:not(:checked)').attr('disabled',true);
}
else
{
$(':checkbox:not(:checked)').attr('disabled',false);
}
}
);
Live demo
Have on onclick handler that when a checkbox is clicked it ups a counter by one if it is unchecked it decreases the count. After raising the count, test to see if it is three. Then probably the easiest method is to either save the ids of the three checked boxes or save them in the previous step. Then change the click event to return true only if the ids match the saved ids.
Sorry I don't have time right now to actually write up any code. Hopefully this will get you started.
jQuery
$("#container :checkbox").click(function(){
if ($("#container :checkbox").length >= 3) {
$("#container :checkbox").attr("disabled", "disabled");
}
});