Question

I am trying to add the option fields on a row to the total field on the row, using jquery. I can’t use ids because there are a variable number of rows, that get created with clone as the user needs them.

<tr>
<td><input name="option_1[]" type="text" class="integer add_to_total"  /></td>
<td><input name="option_2[]" type="text" class="numeric add_to_total"/> </td>
<td><input name="option_3[]" type="text" class="numeric add_to_total"/> </td>
<td><input name="total[]" type="text"   class="numeric is_total"  /> </td>
</tr>

I thought of attaching a change event to the input fields with the ‘add_to_total’ class and using the sibling function to add to the ‘is_total’ class. but I can’t get that syntax right:

$(".add_to_total").change(function() {
    var line_total = 0;
    line_total += $(this + " .add_to_total").siblings().val();
    $(this +  " .is_total").siblings().val(line_total);
});

I get syntax errors and it doesn't work.

Answer 1

$('.add_to_total').change(function(){
  var total = 0;
  var row = $(this).closest('tr');
  row.find('.add_to_total').each(function(){
    total += this.value.replace(/[^\d\.-]/,'')*1;
  });
  row.find('.is_total').val( total );
});

The replace() allows the user to enter 1,000 and not have you end up with NaN for your total.

If speed is a big concern, I might suggest caching the row.find('.add_to_total') as jQuery data on the row, but that’s an optimization best left until you’re sure you need it.