I have a series of textboxes with the following IDs:
118|1/9/2011
118|1/10/2011
118|1/11/2011
118|1/12/2011
118|1/13/2011
118|1/14/2011
118|1/15/2011
118|Total
Using jQuery or just javascript, I need to sum each textbox and assign the value to the total textbox. This needs to happen when a user tabs off or clicks off the textbox. It also needs to be generic enough to handle textboxes with similar IDs such as:
119|1/9/2011
119|1/10/2011
119|1/11/2011
119|1/12/2011
119|1/13/2011
119|1/14/2011
119|1/15/2011
119|Total
The format stays the same. Only the first numbers to the left of the | will change.
Any guidance would be greatly appreciated.
EDIT: I updated my answer to reflect the actual example HTML that Mike provided, which you can view in this fiddle. That link also contains the working javascript from below.
If you have a specific selector for the inputs you want to sum (like a class name), as well as one for the total, you should be able to do this (here's a fiddle link with this javascript in action: http://jsfiddle.net/avidal/zfjmD/):
$('input.sum').change(function() {
var sum = 0;
// we want to sum up the values of all input.sum elements that are in the same tr
// as this one
$(this).closest('tr').find('input.sum').each(function(i) {
var val = parseInt($(this).val(), 10);
/*
change the above line to:
var val = parseFloat($(this).val());
if the inputs will be floats
*/
if (isNaN(val) || val === undefined) {
return;
}
sum += val;
});
$(this).closest('tr').find('input.total').val(sum);
});
The important things to note are the .closest() function, and the .find() function.
First, we bind to the change event for all inputs with a class of sum. When one of those elements is changed (the value changes, then the user clicks/tabs out), we look for the closest tr element, then find the list of inputs with a class of sum that are children of that tr. For each of those inputs, we parse the value and accumulate the sum. After we've iterated over each of those inputs, we finally find the input with a class of total that's a descendant of the closest tr, and set the val of that input to the accumulated sum
Perfect!
Great question and great answer! This works perfectly! To answer Mike, I changed 'tr' to 'table' in the jQuery and it totals all the sums in a table across several tr's and td's. As long as the inputs have the class="sum" they will be totaled.
Related
Iam trying to bring some records using php and do some calculations. What iam doing now is that, each rows is having a dropdown with different currencies. When i select each currency, it calculates and shows certain values. Till here its working fine.
What i am trying to achieve is that if i select first currency dropdown, it should calculate the complete records calculations instead of selecting the currency of each rows. I guess i need to do some kind of loop in the jquery which calculates the rows.
Fiddle
Following is the part of jquery script for the currency dropdown.
$(window).load(function() {
$(document).ready(function() {
$("select").on('change', function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
});
});
});
i guess i need to add some loops here in this jquery. Anyone to guide me how to do this. Or i need to follow a different step.
This is what i have tried as per the suggestion from Leonix.
$(document).ready(function(){
$(this).closest('table').find("select").each(function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find("select");
if(selected=="INR")
{
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else
{
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val()/$(this).closest('table').find('.qty').val()).toFixed(3));
});
});
In your select change function, do a each for all rows of your table and find the dropdown:
$(this).closest('table').find("select").each(function() {
/* Each SELECT here, use $(this) */
})
or, depending of your needs :
$(this).closest('table').find("select").each(function() {
/* Each TR here, use selectInput */
var selectInput = $(this).find("select");
})
With the select in hands, use selectInput.val(changedSelectInput.val())
changedSelectInput is the jquery object containing the select who changed.
Using nested anonymous functions, take care, they are executed in the object context, so this and $(this) change depending on the object affected by function.
Advice: Use specific css classes for JS, as select.select-currency instead of select only, put these classes in your code. it will prevent so many mistakes and will save your time.
Note: currency_change[] is not a valid ID, if you dont need to set one, dont.
EDIT
Some code: https://jsfiddle.net/btpxq5ow/6/
What I did ?
Fix tags issues
Fix input in tbody issues, NEVER put it in a tr, tbody, table directly.
Fix some indentation issues
Apply the currency change to all rows
Prevent change event to call itself in an infinite loop
Apply calculation to all rows when they are updated
Fix some code syntax & performance issues
Please check your calculation are right since i modified it, see calculateRowTotals().
There are still a few html/js errorsthat must be fixed.
You will rarely get code from stackoverflow
I am trying to calculate discounted price which I am able to do without anyproblem for a single item. I also have 'add more' button to add many item as I can. So here, I started facing problem in calculating the discounted price for these dynamically added input field.
My default discount calculation script for single item is
$('#discount_1').change(function(){
var quantity=$('#qty_1').val();
var percent=$('#discount_1').val();
var price=$('#price_1').val();
var tprice = price * quantity
var discountpercent=percent / 100;
var discountprice=(tprice * discountpercent );
$('#total_1').val(tprice - discountprice);
});
I tried changing it to the following
$(":input[id^='discount_']").change(function(){
var quantity=$(":input[id^='qty_']").val();
var percent=$(":input[id^='discount_']").val();
var price=$(":input[id^='price_']").val();
var tprice = price * quantity
var discountpercent=percent / 100;
var discountprice=(tprice * discountpercent );
$(":input[id^='total_']").val(tprice - discountprice);
});
to calculate discount for all the item set having id attribute that starts with qty_, which actually does not seem to work properly.
here is my jsFiddle
I've modified this to remove all ids. This will clean up a lot of extra crap. Here is a fiddle: http://jsfiddle.net/B5T6R/1/
The solution involved event delegation. The problem with $(":input[id^='discount_']").on('change' is that the future trs don't exist yet, so there is nothing to bind to!
The solution is:
$("#InputsWrapper").on('change', '.discount'
Which will listen for all future changes on the InputsWrapper table as a whole, not just to the discount elements.
The problem is that the selectors you are using will always select the first input that matches the selector.
So, (":input[id^='qty_']") will always match the input on the first row.
I suggest:
Rebind the "change" event evertime AddButton is clicked. This will
require .unbind() as well.
Add class "discount" to all discount inputs.
Change the selectors for quantity, price, etc to be relative to the input that was changed.
IE:
$('.discount').unbind().change(function(){
var $parentRow = $(this).parent().parent();
var quantity=$(":input[id^='qty_']", $parentRow).val();
});
It's not a great idea to use all these id's: #qty_1, #qty_2, etc. Instead give all your inputs the same class names to hook into, for example:
<input class='discount' type='text' name='discount'/>
<input class='quantity' type='text' name='quantity'/>
Then use good ole Jquery to traverse the DOM and fetch the relevant data. In this case you have to climb to the closest td and then back down to get the .quantity class, as so:
$(".discount").change(function(){
var quantity = $(this).closest('td').find('.quantity').val();
});
Hope this helps.
You are running into a couple of problems.
First, only the ":input[id^='discount_']" that exist on your page when the DOM is initialized have this change handler added to them - all new rows added via the the Add More Field link will not have this handler bound. You can get around this by attaching the handler to the container all of your fields are in via .on, so that every change event fired within that container will be checked against the selector specified. I've forked your fiddle to demonstrate: http://jsfiddle.net/gLz9B/1/
$('#InputsWrapper').on("change", ":input[id^='discount_']", function(){
...
});
The second issue is that the qty_, total_, price_, and discount_ selectors you are using will return arrays, rather than being limited to the specific row where the change is occurring. In my fiddle fork I did a string replace to get the unique number attached to the id of the element, and then build the ids of all of the other inputs rather than using =^ to select them. This is not the only way to limit your scope, but it works given your sample code.
var id = this.id.replace('discount_','');
var quantity=$("#qty_" + id).val();
I have cloned the rows in my table editable.
The rows have 2 column editable, 1 with editable textarea and the other one with an input numer.
There is a function which sum the numbers in the two input numbers and give the total. You can try here, there is onblur : "submit"
I have cloned both Rows, they are editable but the function to calculate the Total does not work in the rows cloned.
How can i make my function working in the cloned rows?
you are cloning rows with id="sum", and you should not have duplicated ids in your page.
when i have to clone elements i generate dynamic ids so they don't get duplicated.
like this:
var lastid = $('[id^="clonedInput"]').length + 1;
$(".clonedInput").last().clone().attr('id', 'clonedInput' + lastid).appendTo("body")
you can test a full working example here: http://jsfiddle.net/RASG/MjMh5/
also, your jsfiddle is a total mess. please keep only the relevant code.
EDIT
ok, so you have other problems as well.
for instance, your function tally does not sum the cloned rows.
this function (not mention your whole code) could be a lot simpler.
function tally() {
var total = 0;
$('p.editable_number').each(function() {
total += parseInt($(this).text()) || 0;
$('#total').html(total);
})
}
test it here: http://jsfiddle.net/RASG/MA78A/
i am trying to do a form which is so strange to me.
The basic concept is I have a column of product checkboxes in my form, and if you choose that product, then you need to check the relative product checkbox.
In the form, I have another two columns are the prices and sizes of the products. i want to calculate the amount of prices and sizes depends on which products are being ticked. What i only achieve so far is get the value of the product which are being checked, but not the prices and sizes' values. Also, how to do the calculation dynamically.
Here is the html, http://jsfiddle.net/DDEzm/2/
Hope some one can help, many thanks.
try this, this solution is based on your markup:
$(function(){
$('#cb1').live('change',function(){
if ($(this).is(':checked')) {
var val = 0;
val = parseInt($('#tb1').val(), 10) + parseInt($('#tb2').val(), 10)
$('#presult').val(val)
} else {
$('#presult').val('0')
}
});
});
DEMO
All you need to do to get the value is the following:
$(function(){
$("[name='chkProduct']").live('change',function(){
var totalCost = 0;
$("[name='chkProduct']").each(function(i){
if($(this).attr("checked")) {
var price = $(this).parent().next().find("[name='price']").val();
var size= $(this).parent().next().next().find("[name='size']").val();
totalCost = totalCost + (price * size);
$("#presult").val(totalCost);
}
});
});
});
But you might want to add checks to make sure that it is numbers that you are trying to add, either by limiting the input, or checking when you click the checkbox. You could use javascripts parseInt, for instance.
Also, you could have a name, or class to identify the checkboxes. That way you don't have to write a change function for each checkbox.
Edit
I modified it so that it would work with all checkboxes and caluculate the total.
I'm trying to generate a price based on radio button selections, on input fields that are added (sort of like a list). Unfortunately since each set of radio buttons added has a unique name (so that they can be parsed separately later) the function that calculates the price is pulling the radio buttons value by it's name. This is clearly problematic since there are multiple instances of the same scenario.
Anyone?
http://jsfiddle.net/pxrpF/1/
I'm also looking to generate a Grand Total that will add up each set, so if anyone can help me figure these two bits out that would be wonderful!
This should handle the problem with grabbing the right radio buttons:
var containerCount = $(this).parents('.container').prevAll('.container').size();
var $r = $('.container:eq('+containerCount+')').find(cardType);
var $d = $('.container:eq('+containerCount+')').find(cardQ);
EDIT (to incorporate conversation below)
In addition, the selector strings cardType and cardQ should be as follows:
var cardType = ":radio[name*='type']:checked"
var cardQ = ":radio[name*='quantity']:checked"
The *= ensures that the attribute starts with type or quantity respectively.