How to Sum of same id's from dynamically created input fields

Question

The summation of same id's not working from dynamically created input fields. Here i want sum of dynamically created id="tamnt". Can anyone tell me where i have mistake. can you explain it.

function totalIt() {
  var total = 0;
  var tableRow = $(this).closest("tr");
  var sim = Number(tableRow.find("#tamnt"));
  tableRow.find("#tamnt").each(function() {
    var val = this.value;
    total += val == "" || isNaN(val) ? 0 : parseInt(val);
  });
  // $("#total").val(total);
  console.log(total);
}

$('#add_bank_info').click(function() {
  var ele = $('.bank_table').find('tbody').find('tr:last');
  var ele_clone = ele.clone();

  ele_clone.find('input, select').attr("disabled", false).val('');
  ele_clone.find('td div.dummy').removeClass('has-error has-success');
  ele_clone.find('td div.input-icon i').removeClass('fa-check fa-warning');
  ele_clone.find('td:last').show();
  totalIt();
  ele_clone.find('.remove_bank_row').click(function() {
    $(this).closest('tr').remove();
    totalIt();
  });
  ele.after(ele_clone);
  ele_clone.show();
});

$("table").on("keyup", "input", function() { //use event delegation
  var tableRow = $(this).closest("tr"); //from input find row
  var one = Number(tableRow.find(".quantity2").val()); //get first textbox
  var two = Number(tableRow.find("#rate").val()); //get second textbox
  var total = one * two; //calculate total
  tableRow.find("#tamnt").val(total); //set value
  totalIt();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-2">
  <strong><a href="javascript:void(0);" id="add_bank_info" class="addCF "><i class="fa fa-plus"></i>&nbsp;Add New</a></strong>
</div>
<div class="table-scrollable form-body">
  <table class="table table-bordered table-striped table-hover bank_table">
    <thead>
      <tr>
        <th style="width:10%">Names</th>
        <th style="width:10%">Quantity</th>
        <th style="width:10%">Unit Rate</th>
        <th style="width:10%">Total Amount</th>
        <th style="width:5%">Delete</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>
          <div class="dummy">
            <div class="input-icon right">

              <select name="pr_article_no[]" id="sp_name" class="form-control">
                <option value="">--Select Options--</option>
                <option value="0"></option>
                <option value="1">Item A</option>
                <option value="2">Item B</option>
                <option value="3">Item C</option>

              </select>
            </div>
          </div>
        </td>
        <td>
          <div class="dummy">
            <div class="input-icon right">

              <input type="text" class="form-control quantity2" maxlength="25" name="purchase_quantity[]" id="quantity2">
            </div>
          </div>
        </td>
        <td>
          <div class="dummy">
            <div class="input-icon right">

              <input type="text" class="form-control" name="purchase_unit_rate[]" id="rate">
            </div>
          </div>
        </td>
        <td>
          <div class="dummy">
            <div class="input-icon right">

              <input type="text" class="form-control" name="purchase_unit_amount[]" id="tamnt">
            </div>
          </div>
        </td>

        <td style="display:none;">
          <button class="remove_bank_row">
            Remove
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Here is my working fiddle.

https://jsfiddle.net/jvk3/6ath5vy9/4/

Thanks for your suggestions and time.

@MattBurland. i am unable to understand your question, can you explain where i have to change id. — krishna
– krishna, Commented Jun 12, 2017 at 16:47
It is a mistake to have duplicate ids in your HTML. That's why your code doesn't work. When you select by id it only returns one item, because there should only ever be one item with that id. — Matt Burland
– Matt Burland, Commented Jun 12, 2017 at 16:48
@MattBurland. I have check there are no duplicate id in html. — krishna
– krishna, Commented Jun 12, 2017 at 17:06
There are duplicate ids. Every time you insert a new row you are adding rows with the same ids as before. — Matt Burland
– Matt Burland, Commented Jun 12, 2017 at 17:07

Tomalak · Accepted Answer · 2017-06-12 18:43:32Z

This is a good situation for jQuery custom events and event delegation.

The code below triggers a recalc event every time something relevant changes in the table (and once on page load.)

The event bubbles up the DOM tree and depending on where it is picked up, it causes different effects. At the row level it recalculates the row total. At the table level it calculates the grand total.

Make sure you don't use an ID for any element that can occur more than once. Instead, use CSS classes to tag elements that can appear multiple times.

$('#add_bank_info').click(function() {
  var ele = $('.bank_table tbody tr:last');
  var ele_clone = ele.clone();

  ele_clone.find('input, select').prop("disabled", false).val('');
  ele_clone.find('td div.dummy').removeClass('has-error has-success');
  ele_clone.find('td div.input-icon i').removeClass('fa-check fa-warning');
  ele_clone.find('td:last').show();
  ele.after(ele_clone);
});

$(document).on("click", ".remove_bank_row", function() {
  var $table = $(this).closest('table');
  $(this).closest('tr').remove();
  $table.trigger("recalc");      
});

$(document).on("keyup", ".bank_table input", function() {
  $(this).trigger("recalc");
});

$(document).on("recalc", ".bank_table tr", function() {
  var total = +$(this).find(".quantity2").val() * +$(this).find(".rate").val();
  $(this).find(".tamnt").val(total.toFixed(2));
});

$(document).on("recalc", ".bank_table", function () {
  var grandTotal = 0;
  $(this).find(".tamnt").each(function () {
    grandTotal += +$(this).val();
  });
  $("#grandTotal").text(grandTotal.toFixed(2));
});

$(".bank_table").trigger("recalc");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm-2">
  <button id="add_bank_info" class="addCF"><i class="fa fa-plus"></i>&nbsp;Add New</button>
</div>
<div class="table-scrollable form-body">
  <table class="table table-bordered table-striped table-hover bank_table">
    <thead>
      <tr>
        <th>Names</th>
        <th>Quantity</th>
        <th>Unit Rate</th>
        <th>Total Amount</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="dummy">
            <div class="input-icon right">
              <select name="pr_article_no[]" id="sp_name" class="form-control">
                <option value="">--Select Options--</option>
                <option value="0"></option>
                <option value="1">Item A</option>
                <option value="2">Item B</option>
                <option value="3">Item C</option>
              </select>
            </div>
          </div>
        </td>
        <td>
          <div class="dummy">
            <div class="input-icon right">
              <input type="text" class="form-control quantity2" size="5" name="purchase_quantity[]">
            </div>
          </div>
        </td>
        <td>
          <div class="dummy">
            <div class="input-icon right">
              <input type="text" class="form-control rate" size="5" name="purchase_unit_rate[]">
            </div>
          </div>
        </td>
        <td>
          <div class="dummy">
            <div class="input-icon right">
              <input type="text" class="form-control tamnt" size="7" name="purchase_unit_amount[]">
            </div>
          </div>
        </td>
        <td>
          <button class="remove_bank_row">Remove</button>
        </td>
      </tr>
    </tbody>
  </table>
  <hr>
  <div style="font-weight: bold">Grand total: <span id="grandTotal"></span></div>
</div>

Note: Your code allows removing the last row and after that your table is broken. I have not fixed that error.

Collectives™ on Stack Overflow

How to Sum of same id's from dynamically created input fields

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related