multiplying input fields within a listview using jquery

Question

I have a listview with lists lines of an invoice (Which are editable), each invoice line has a qty and a rate and I want to show the line total on the client show so if the qty or rate is changed the total changes before the postback.

I have applied the below which gives the right result but doesn't work with multiple line items. The qty and rate fields have a class name of decimal and when they leave focus it will update the line total as per below but I need to restrict it to only update the total of the current line which it doesn't but inputs the total value of all lines with the sum of the first entry.

$(".decimal").blur(function() {           
       $(".total").val($(".qty").val() * $(".rate").val());

    });

Answer 1

It should be possible to do this, but we'd need to see how your HTML is set up to recommend specific code.

Basically, in the function called when the blur event is fired, you have access to $(this), which will represent the particular field on which the blur event occurred. You should be able to use jQuery selectors to set the total for the particular field that has the .total class and is in the same line as $(this).

An example: if your HTML looked like this:

<div>
     <input type="text" class="decimal qty"> <input type="text" class="decimal rate"> <input type="text" class="total">
<div>

(repeated, of course, for the various rows)

Then the target total field will always be a sibling of the triggering decimal field, so, for example, you could do

$(this).parent().filter(".total").val(//and set your values here)