使用javascript计算动态输入框的折扣

Question

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

Answer 1

I've modified this to remove all id s. 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 tr s 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.

Answer 2

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:

1. Rebind the "change" event evertime AddButton is clicked. This will require .unbind() as well.
2. Add class "discount" to all discount inputs.
3. 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();
});

Answer 3

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.

Answer 4

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