How to find row wise total and grand total for dynamic rows using nested form?

Question

I have used nested form. This is my jquery code to find row wise total and grand total for invoice application.

$("tr.sum_hours td").on("change", '.hr', function() {
  row = $(this).parent("td").parent();
  total    = 0;
  qnt      = 0;
  rate     = 0;
  discount = 0;
  tax      = 0;
  $(row).find("td input.hr").each(function(index) {
    if ($(this).val() !== "") {
      if ($(this).hasClass('quantity')){
        qnt = parseFloat($(this).val());
      }
      if($(this).hasClass('rate')){
        rate = parseFloat($(this).val());
      }
      if($(this).hasClass('discount')){
        discount = parseFloat($(this).val());
      }
      if($(this).hasClass('tax')){
        tax = parseFloat($(this).val());
      }
      return total = ((qnt*rate)-(discount)+(tax))
    }
  });
  $(row).find("td input.total").val(total);
  grand_total = 0;
  return $(".total").each(function() {
    if ($("#invoice_grand_total") !== "") {
      grand_total = grand_total + parseFloat($(this).val());
    }
    return $("#invoice_grand_total").val(grand_total);
  });
  });

and this is my html code.

<table class='item_details'>
  <thead>
  <tr>
    <th>Item name</th>
    <th>Description</th>
    <th>Qty</th>
    <th>Rate</th>
    <th>Discount</th>
    <th>Tax</th>
    <th>Total</th>
    <th>Action</th>
  </tr>
  </thead>
  <tbody class='item_details_input'>

    <tr class='sum_hours'>
<td><input id="invoice_item_details_attributes_0_item_name" name="invoice[item_details_attributes][0][item_name]" size="30" type="text" /></td>
<td><input id="invoice_item_details_attributes_0_description" name="invoice[item_details_attributes][0][description]" size="30" type="text" /></td>
<td><input class="quantity hr" id="invoice_item_details_attributes_0_quantity" name="invoice[item_details_attributes][0][quantity]" size="30" type="text" /></td>
<td><input class="rate hr" id="invoice_item_details_attributes_0_rate" name="invoice[item_details_attributes][0][rate]" size="30" type="text" /></td>
<td><input class="discount hr" id="invoice_item_details_attributes_0_discount" name="invoice[item_details_attributes][0][discount]" size="30" type="text" /></td>
<td><input class="tax hr" id="invoice_item_details_attributes_0_tax" name="invoice[item_details_attributes][0][tax]" size="30" type="text" /></td>

<td><input class="total" disabled="disabled" id="invoice_item_details_attributes_0_total" name="invoice[item_details_attributes][0][total]" size="30" type="text" /></td>
<td><a href="#" class="remove_fields btn btn-mini btn-danger">remove</a></td>
</tr> 
    <tr class='sum_hours'>
<td><input id="invoice_item_details_attributes_1_item_name" name="invoice[item_details_attributes][1][item_name]" size="30" type="text" /></td>
<td><input id="invoice_item_details_attributes_1_description" name="invoice[item_details_attributes][1][description]" size="30" type="text" /></td>
<td><input class="quantity hr" id="invoice_item_details_attributes_1_quantity" name="invoice[item_details_attributes][1][quantity]" size="30" type="text" /></td>
<td><input class="rate hr" id="invoice_item_details_attributes_1_rate" name="invoice[item_details_attributes][1][rate]" size="30" type="text" /></td>
<td><input class="discount hr" id="invoice_item_details_attributes_1_discount" name="invoice[item_details_attributes][1][discount]" size="30" type="text" /></td>
<td><input class="tax hr" id="invoice_item_details_attributes_1_tax" name="invoice[item_details_attributes][1][tax]" size="30" type="text" /></td>

<td><input class="total" disabled="disabled" id="invoice_item_details_attributes_1_total" name="invoice[item_details_attributes][1][total]" size="30" type="text" /></td>
<td><a href="#" class="remove_fields btn btn-mini btn-danger">remove</a></td>
</tr>
  </tbody>
</table>

this code is working for static rows. But it is not working for the dynamically added rows. Please help.

and you call the javascript every time you added a row dynamically? — Ingo, Jul 17 '13 at 06:30
What do you mean by nested form? I sincerely hope you don't mean what I think it means... — Mr Lister, Jul 17 '13 at 09:34
handling multiple objects in single form in rails achieved by nested form. — Thrikal Samy, Jul 17 '13 at 10:11

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

replace

$("tr.sum_hours td").on("change", '.hr', function() {

with this

$("body").on("change", 'tr.sum_hours td .hr', function() {

i hope it will work.

if you want more clarification see jQuery click function doesn't work after ajax call?

a jsfiddle demo of want went wrong http://jsfiddle.net/suhailvs/wjqjq/

jsfiddle of your code after the above changes,visit http://jsfiddle.net/suhailvs/t67pn/1/

edited May 23 '17 at 12:12

Community

1
1

answered Jul 18 '13 at 07:40

suhailvs

20,182
14
100
98

hia what i syou r numbber – Thrikal Samy Nov 21 '13 at 15:43

How to find row wise total and grand total for dynamic rows using nested form?

1 Answers1

replace

with this