dynamically add input field value jQuery

Question

html code we can get the value

<input type="text" name="value1[]" id="value1"/>
<input type="mail" name="value2[]" id="value2"/>
<input type="text" name="total[]" id="total" />

i can try with this in jQuery i can get only html value result, after add new row i can't get the value

 $(document).ready(function () {

var counter = 0;

$("#addrow").on("click", function () {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td>Item1</td>';
    cols += '<td><input type="text" class="form-control" name="value1[]"        id="value2' + counter + '"></td>';
    cols += '<td><input type="text" class="form-control" name="foreign_milion[]" id="foreign_milion_' + counter + '"></td>';
    cols += '<td><input type="text" readonly class="form-control" name="total_milion[]" id="total_"' + counter + '"></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});
    $("#value2").keyup(function () {
        var value1 = $("#value1").val();
        var value2 = $("#value2").val();
        var totalincome = parseInt(value1) + parseInt(value2);
        //alert(totalincome);
        $("#total").val(totalincome);
    })
  });

you use the `keyup` for `value2` that mean you'll create another `keyup` handler for the others??!! — Mohamed-Yousef, Dec 26 '18 at 15:54
you need to dynamically add new field and do calculations, right ? — Akhil Aravind, Dec 26 '18 at 15:54
you are showing only input text but there is table, Please paste your table data also, we have to calculate based on table not on inut — jvk, Dec 26 '18 at 16:05
there only one tr and theree td in table@KrishnaJonnalagadda — Parvez Ahmed, Dec 26 '18 at 16:16

Zakaria Acharki · Accepted Answer · 2018-12-26T16:53:38.170

First of all the id must be unique in the same document, else you'll end up with incorrect HTML code, so you need to replace the ids with common classes instead in your code as a first step.

Then you need to use event delegation to attach the event to your inputs since the must of them are created dynamically with the JS code.

I prefer the use of input event instead of keyup when you track the user inputs, so the event will be something like:

$(document).ready(function() {
  var counter = 1;

  $("body").on("input", ".calculated_value", function() {
    var parent_row = $(this).closest('tr');
    var totalincome = 0;

    parent_row.find('.calculated_value').each(function() {
      totalincome += parseInt($(this).val() || 0);
    });

    parent_row.find(".total").val(totalincome);
  });

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td>Item ' + counter + '</td>';
    cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
    cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
    cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="order-list">
  <tr>
    <td>Item </td>
    <td><input type="text" class="form-control calculated_value" name="value1[]"></td>
    <td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>
    <td><input type="text" class="form-control total" name="total_milion[]" readonly></td>
  </tr>
</table>
<button id="addrow">Add row</button>

Akhil Aravind · Answer 2 · 2018-12-26T16:28:28.120

I have tried this one, may be this is what you are looking into. please take a look at the snippet.

jQuery(document).ready(function () {
  var count = 1;
 jQuery('#add').on('click', function(){
  var el = `<section id="inpFields">
  <input type="text" name="value1[]" id="value`+count+`" placeholder="value `+count+`"/>
  <input type="text" name="value2[]" id="value2`+count+`" placeholder="value `+count+`"/>
  <input type="text" name="total[]" id="total`+count+`"  placeholder="total" />
  <button class="totalBtn" data-id="`+count+`">Total</button>
</section>`;
 jQuery('#inpFields').append(el);
 count++;
 });
 
 jQuery('#add').click();
  jQuery(document).on('click', '.totalBtn', function(){
  var i = this.dataset.id;
   var value1 = jQuery('#value'+i).val();
   var value2 = jQuery('#value2'+i).val();
   var totalincome = parseInt(value1) + parseInt(value2);
   //alert(totalincome);
   jQuery('#total'+i).val(totalincome);
   })
 
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="add">Add Fields</button>
<section id="inpFields">
  
</section>

i can check this,what is the html code this can't work with in my code@Akhil — Parvez Ahmed, Dec 26 '18 at 16:49

dynamically add input field value jQuery

2 Answers2