Add a unique ID to form input for total

Question

Hi,

The problem I'm having is i'm working on an invoicing system. Which uses this,

$(document).ready(function() {
    $('#add').click(function() {
       JQuery('#lineItems').append('<input type="text" name="description[]"
           class="ui-corner-all text invDesc" /> 
           <input type="text" name="qty[]" class="ui-corner-all text invQty" /> 
           <input type="text" name="amount[]" class="ui-corner-all text invAmount"
           title="Amount" /> 
           <input type="hidden" name="rowTotal[]" class="row-total-input" />');
    });
   });

to create new line item. The hidden input named rowTotal[] is meant to hold the totals of each row so they can be added up. The Code i am using to get the row total of qty * amount is,

$(function(){
    $('.row-total-input').each(
     function( intIndex ){
      $('.invAmount').livequery('blur', function() {
        var $this = $(this);
        var amount = $this.val();

        var qty = $this.parent().find('.invQty').val(); 

        if ( (IsNumeric(amount)) && (amount != '') ) {           
         var rowTotal = qty * amount;   
         $this.css("background-color", "white").parent().find(".row-total-input").val(rowTotal); 
        } else {        
         $this.css("background-color", "#ffdcdc");                     
              };         

        calcProdSubTotal();      
           calcOrderTotal();
      });
     }
    );
});

However it updates all the rowTotal[] input fields to the last row total so the final sum isn't correct.

I am assuming I need to create some sort of unique ID for each rowTotal[] so only the correct one is updated. I just don't know how to do it.

Thanks in advance.

Answer 1

Ah the problem is here:

var qty = $this.parent().find('.invQty').val();

If each row would have a distinct parent it would be fine, but all the 'rows' are contained within the same parent - #lineItems. What should help is changing your current row creation code to this:

$(document).ready(function() {
    $('#add').click(function() {
       JQuery('#lineItems').append('<div><input type="text" name="description[]"
           class="ui-corner-all text invDesc" /> 
           <input type="text" name="qty[]" class="ui-corner-all text invQty" /> 
           <input type="text" name="amount[]" class="ui-corner-all text invAmount"
           title="Amount" /> 
           <input type="hidden" name="rowTotal[]" class="row-total-input" /></div>');
         //notice the extra div tag that wrapps around all the input fields
    });
});