Discount calculation of dynamic input box using javascript - javascript

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();

Related

Jquery in loop to perform some calculation of records

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

how to attach javascript event handlers to these elements created in javascript

Background
I'm not the hottest jQuery guy out there by a very long shot and I'm trying to strip out the repeated work in the below code. Whilst the performance overhead is probably minimal and negligible - this is more a case of not wanting to write crappy code that does the same thing several times.
Basically I have a simple invoice form, that a user can add multiple items too.
The form initially has 4 inputs: Item Name, Item Price, Item Quantity and Total
The total is calculated whenever the Price or Quantity field fires a change event
Problem - Partially resolved (See Update)
The user can add an additional row of inputs for a second (or third, fourth, fifth, etc...) item
The existing javascript which attaches the event handler to the price and quantity fields has already run so will not attach listeners to the newly added row of inputs.
Solution ?
Currently I've hashed out something horrible whereby after adding the new row of inputs I re-attach an event listener to all input fields.
That's cool I guess, if you take no pride in the quality of your work, but if the invoice is 20 items do I really need to on adding the 20th item row loop over the 19 rows that already have listeners attached, attach them again and then attach listeners to the new row. I would hope not.
I've already managed to target the newly added row of inputs to wipe the values from the cloned inputs - so I'm thinking just target the new input fields and attach listeners - but I'm getting in a right two and eight because ideally I'd like to do this like so
Clone the input row
Clear the values
Attach listeners
Add to the DOM
What I'm currently doing which feels grotesque is
Clone the row
Add the row to the DOM
Select the newly added row and wipe the values
Select the newly added Quantity field and attach a listener
Select the newly added Price field and attach a listener
Select the newly added Total field and attach a listener (to update the invoice total)
Code below, for you to laugh at and then hopefully take pity on me and provide a more succinct solution or at least a suggestion as to how to go about writing my own better version.
/** Add additional item lines */
$('#add-item').click(function(e){
e.preventDefault();
/** clone first line and insert it */
$('.input-row:first').clone().insertAfter('.input-row:last');
/** clear the newly inserted inputs of values */
$(':input', '.input-row:last').val("");
/** ensure all item price and qty inputs have events attached to their change value */
$('input[name="item_qty[]"],input[name="item_price[]"]').on("change",function () {
var $container = $(this).closest('.form-group');
qty = Number($('input[name="item_qty[]"]',$container).val())||0,
price = Number($('input[name="item_price[]"]',$container).val())||0;
$('input[name="item_total[]"]',$container).val(qty * price);
$('input[name="item_total[]"]',$container).change();
});
/** Sum inputs for invoice total */
$('input[name="item_total[]"').change(function() {
var total = 0;
$.each($("[name='item_total[]']"), function(index, value) {
total += parseFloat($(this).val());
});
$("#total").val(total);
});
});
Update
So by utilising event delegation, events propagate (or bubble) up the dom - thanks guys! I've got the invoice total being recalculated any time one of the inputs within the new parent div change
<div id="invoice-items">
<input name /> <input quantity /> <input price /> <input total />
<input name /> <input quantity /> <input price /> <input total />
<input name /> <input quantity /> <input price /> <input total />
...
</div>
/** if any input rows change update the invoice total */
$('#invoice-items').on('change', 'input', function(event){
var total = 0;
$.each($("[name='item_total[]']"), function(index, value) {
total += parseFloat($(this).val());
});
$("#total").val(total);
});
Problem I'm left with...
I'm still stuck on how I go about updating <input total /> to reflect the changes to that particular line. I'm guessing somewhere in my new jQuery snippet I need to determine which field changed and update the total on the same row ?
This is how I'm currently attaching the change listeners to the first / existing row of input to populate the line total
/** calculate item total */
$('input[name="item_qty[]"],input[name="item_price[]"]').on("change", function () {
var $container = $(this).closest('.form-group');
qty = Number($('input[name="item_qty[]"]',$container).val())||0,
price = Number($('input[name="item_price[]"]',$container).val())||0;
$('input[name="item_total[]"]',$container).val(qty * price);
$('input[name="item_total[]"]',$container).change();
});
I guess what I still need is some means to run this code after a line has been added, or following the cleaner event delegation route - some way to target just the item_total[] for the row in which the change event happens ? Maybe I can capture the specific index of the element on which the change event is fired - and update only the item_total[] at that index ?
Just thinking out loud here, I guess if I capture the event and loop through all of the inputs til I find that element which matches the element the event was fired from I could then grab the next form input with the name invoice_total[] and update it ? - let's go check.
Update
So I can capture the event - happy days :)
event.currentTarget.attributes.name.nodeValue == 'item_qty[]'
So I still don't know which of the item_qty[] elements I've updated and therefore I don't know which item_total[] element to update.
Any suggestions guys ?!?
You want to take the wrapping element
<div>
<input />
<input />
</div>
$('div').on('change', 'input', function(){
// your magic here
});
This will work on the two who are there now, and new elements as well. Why? Simply put:
You bind the events to elements that exists. You make a new one, change it, but never bound the event to the new elements. The event bubbles up the tree, nothing to catch it.
My code doest bind to the elements itself, your telling it to listen to changes in it on input. New elements come in, you change them, nothing happends, so it bubbles up the tree.
And this is the big difference: this time we told the existing element to do something now.

JQuery Popover On Calculations?

I ran into a problem with my JQuery. I have been doing a calculator for certain items and quantity and originally made a popup .alert above the name and moved the whole row of items below it. To fix this problem I want to have a Twitter Bootstrap v3.0.3 popover triggered by the live calculation of the number of items times the price of one item.
What I want to do:
//Stone
$("#Stone").on('keyup',function(){
// alert('pressed')
var CostStone= $("#StonePrice").val() * $(this).val()
var CostStone2 = CostStone.toFixed(2);
$(".CostStone").html(" data-toggle='popover' ");
});
//End Stone
I know this won't work, but somehow I need someone to come up with a JQuery alternative for
data-toggle so that I can trigger the popover while typing in an input box.
If you want to see my original idea just to get an idea of what I'm talking aboutcheck out this Fiddle.
modify your javascript with this
//Stone
$("#Stone").on('keyup',function(){
var stoneprice = $("#StonePrice").val();
var currentprice = $(this).val();
var CostStone= Number(stoneprice) * Number(currentprice);
var CostStone2 = CostStone.toFixed(2);
$(".CostStone").html(" data-toggle='popover' ");
});
//End Stone

JQuery calculate values for dynamically added fields

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.

jQuery: Total values in textboxes automatically

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.

Categories