javascript function in dynamically input

Question

I'm having an issue using jQuery function multiplication (math) with dynamically created inputs (again created with jQuery). I can't get my function to bind to the new inputs. for the first row its work, but for second row it did not work (second row and more using dynamically input).

Here my html code

<table class="table table-condensed" style="margin-left: 10px;">
        <thead>
          <tr>
            <th width="100px">Nama</th>
            <th width="100px">Kode</th>
            <th width="100px">Harga</th>
            <th width="100px">Jumlah</th>
            <th width="100px">Total</th>
            <th width="80px"></th>
          </tr>
        </thead>

        <tbody id='itemlist' >
          <tr>
            <td><input id='nama' name='nama_input[]' class='form-control' /></td>
            <td><input id='kode' readonly name='kode_input[]' class='form-control' /></td>
            <td><input id='harga' name='harga_input[]' class='form-control' onkeyup="sum();" /></td>
            <td><input id='jumlah' autocomplete="off" name='jumlah_input[]' class='form-control' onkeyup="sum();" /></td>
            <td><input id='total' name='total_input[]' class='form-control' value=" " /></td>
            <td></td>
          </tr>
        </tbody>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <button type="button" class="btn btn-default" onclick="additem(); return false">
              <b>Tambah</b>
            </button>
          </td>
        </tr>
      </table>

And this my script

function additem() { 


//menentukan target append
var itemlist = document.getElementById('itemlist');

//                membuat element
var row = document.createElement('tr');
var nama = document.createElement('td');
var kode = document.createElement('td');
var harga = document.createElement('td');
var jumlah = document.createElement('td');
var total = document.createElement('td');
var aksi = document.createElement('td');


//                meng append element
itemlist.appendChild(row);
row.appendChild(nama);
row.appendChild(kode);
row.appendChild(harga);
row.appendChild(jumlah);
row.appendChild(total);
row.appendChild(aksi);

//                membuat element input1
var nama_input = document.createElement('input');
nama_input.setAttribute('name', 'nama_input[]');
nama_input.setAttribute('class', 'form-control');

var kode_input = document.createElement('input');
kode_input.setAttribute('name', 'kode_input[]');
kode_input.setAttribute('readonly', '');
kode_input.setAttribute('class', 'form-control');

var harga_input = document.createElement('input');
harga_input.setAttribute('name', 'harga_input[]');
harga_input.setAttribute('class', 'form-control');
harga_input.setAttribute('onkeyup', 'sum();');


var jumlah_input = document.createElement('input');
jumlah_input.setAttribute('name', 'jumlah_input[]');
jumlah_input.setAttribute('class', 'form-control');
jumlah_input.setAttribute('autocomplete', 'off');
jumlah_input.setAttribute('onkeyup', 'sum();');


var total_input = document.createElement('input');
total_input.setAttribute('name', 'total_input[]');
total_input.setAttribute('class', 'form-control');
total_input.setAttribute('readonly', '');

var hapus = document.createElement('span');

//                meng append element input
nama.appendChild(nama_input);
kode.appendChild(kode_input);
harga.appendChild(harga_input);
jumlah.appendChild(jumlah_input);
total.appendChild(total_input);
aksi.appendChild(hapus);

hapus.innerHTML = '<button class="btn btn-small btn-default"><b>Hapus</b></button>';
//                membuat aksi delete element
hapus.onclick = function () {
  row.parentNode.removeChild(row);
};


var namaid = 'nama' + (Math.floor((1 + Math.random()) * 0x10000));
var kodeid = 'kode' + (Math.floor((1 + Math.random()) * 0x10000));
var hargaid = 'harga' + (Math.floor((1 + Math.random()) * 0x10000));
var jumlahid = 'jumlah' + (Math.floor((1 + Math.random()) * 0x10000));
var totalid = 'total' + (Math.floor((1 + Math.random()) * 0x10000));
nama_input.setAttribute('id', namaid);
kode_input.setAttribute('id', kodeid);
harga_input.setAttribute('id', hargaid);
jumlah_input.setAttribute('id', jumlahid);
total_input.setAttribute('id', totalid); 

function sum() {
          var hrg = document.getElementById('hargaid').value;
          var jml = document.getElementById('jumlahid').value;
          var result = parseInt(hrg) * parseInt(jml);
          if (!isNaN(result)) {
           document.getElementById('totalid').value = result;
         }
       }

$("#" + namaid).autocomplete({
  source: "get_barang.php",
  minLength: 2,
  select: function(event, ui) {
    $("#" + kodeid).val(ui.item.kode);
    $("#" + hargaid).val(ui.item.harga);
  }
});



i++;

}

Any help is appreciated.

are you using jquery UI for autocomplete? It seems your snippet is not working — Chetan
– Chetan, Commented Nov 11, 2016 at 4:40
ya, i also using autocomplete in my dynamically input. so that is problem why my sum function not working? how should i do? — Handi Ajar Subekti
– Handi Ajar Subekti, Commented Nov 11, 2016 at 4:51
can you make your snippet work for at least your static element i.e first one — Chetan
– Chetan, Commented Nov 11, 2016 at 5:03
You have to bind you event using $(document).on() for dynamically created elements. And use class instead of using ids since you have multiple textbox. — R.K.Saini
– R.K.Saini, Commented Nov 11, 2016 at 5:37
@user3273700 how to implement $(document).on() in my script? — Handi Ajar Subekti
– Handi Ajar Subekti, Commented Nov 11, 2016 at 5:56

Chetan · Accepted Answer · 2016-11-11 06:10:20Z

You are not passing current id's of inputs to your sum method. and one more thing add jquery onkeyup event to your dynamic inputs. please refer below code -

 $(function() {
   $('#sample').on('click',additem)
    $( "#nama" ).autocomplete({
      source: "get_barang.php",
      minLength: 2,
      select: function( event, ui ) {
        $('#kode').val(ui.item.kode);
        $('#harga').val(ui.item.harga);
      }
    });
  });

function sum() {
              var hrg = document.getElementById('harga').value;
              var jml = document.getElementById('jumlah').value;
              var result = parseInt(hrg) * parseInt(jml);
              if (!isNaN(result)) {
               document.getElementById('total').value = result;
             }
           }

  var i = 1;

  function additem() { 


    //menentukan target append
    var itemlist = document.getElementById('itemlist');

    //                membuat element
    var row = document.createElement('tr');
    var nama = document.createElement('td');
    var kode = document.createElement('td');
    var harga = document.createElement('td');
    var jumlah = document.createElement('td');
    var total = document.createElement('td');
    var aksi = document.createElement('td');


    //                meng append element
    itemlist.appendChild(row);
    row.appendChild(nama);
    row.appendChild(kode);
    row.appendChild(harga);
    row.appendChild(jumlah);
    row.appendChild(total);
    row.appendChild(aksi);

    //                membuat element input1
    var nama_input = document.createElement('input');
    /*nama_input.setAttribute('id', 'nama');*/
    nama_input.setAttribute('name', 'nama_input[]');
    nama_input.setAttribute('class', 'form-control');

    var kode_input = document.createElement('input');
   /* kode_input.setAttribute('id', 'kode1');*/
    kode_input.setAttribute('name', 'kode_input[]');
    kode_input.setAttribute('readonly', '');
    kode_input.setAttribute('class', 'form-control');

    var harga_input = document.createElement('input');
    harga_input.setAttribute('name', 'harga_input[]');
    harga_input.setAttribute('class', 'form-control');
    //harga_input.setAttribute('onkeyup', 'sum();');
    

    var jumlah_input = document.createElement('input');
    jumlah_input.setAttribute('name', 'jumlah_input[]');
    jumlah_input.setAttribute('class', 'form-control');
    //jumlah_input.setAttribute('onkeyup', 'sum();');
    

    var total_input = document.createElement('input');
    total_input.setAttribute('name', 'total_input[]');
    total_input.setAttribute('class', 'form-control');

    var hapus = document.createElement('span');

    //                meng append element input
    nama.appendChild(nama_input);
    kode.appendChild(kode_input);
    harga.appendChild(harga_input);
    jumlah.appendChild(jumlah_input);
    total.appendChild(total_input);
    aksi.appendChild(hapus);

    hapus.innerHTML = '<button class="btn btn-small btn-default"><b>Hapus</b></button>';
    //                membuat aksi delete element
    hapus.onclick = function () {
      row.parentNode.removeChild(row);
    };


    var namaid = 'nama' + (Math.floor((1 + Math.random()) * 0x10000));
    var kodeid = 'kode' + (Math.floor((1 + Math.random()) * 0x10000));
    var hargaid = 'harga' + (Math.floor((1 + Math.random()) * 0x10000));
    var jumlahid = 'jumlah' + (Math.floor((1 + Math.random()) * 0x10000));
    var totalid = 'total' + (Math.floor((1 + Math.random()) * 0x10000));
    nama_input.setAttribute('id', namaid);
    kode_input.setAttribute('id', kodeid);
    harga_input.setAttribute('id', hargaid);
   
    jumlah_input.setAttribute('id', jumlahid);
    total_input.setAttribute('id', totalid); 
      
    // harga_input.setAttribute("onkeyup", "sum("+hargaid+","+jumlahid+","+totalid+")");
//  jumlah_input.setAttribute("onkeyup", "sum("+hargaid+","+jumlahid+","+totalid+")");
     $(jumlah_input).on('keyup',function(){
    
      sum(hargaid,jumlahid,totalid)
    })
    $(harga_input).on('keyup',function(){
    
      sum(hargaid,jumlahid,totalid)
    })
    function sum(hargaid,jumlahid,totalid) {
              var hrg = document.getElementById(hargaid).value;
              var jml = document.getElementById(jumlahid).value;
              var result = parseInt(hrg) * parseInt(jml);
              if (!isNaN(result)) {
               document.getElementById(totalid).value = result;
             }
           }

    $("#" + namaid).autocomplete({
      source: "get_barang.php",
      minLength: 2,
      select: function(event, ui) {
        $("#" + kodeid).val(ui.item.kode);
        $("#" + hargaid).val(ui.item.harga);
      }
    });



    i++;

  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table class="table table-condensed" style="margin-left: 10px;">
        <thead>
          <tr>
            <th width="100px">Nama</th>
            <th width="100px">Kode</th>
            <th width="100px">Harga</th>
            <th width="100px">Jumlah</th>
            <th width="100px">Total</th>
            <th width="80px"></th>
          </tr>
        </thead>

        <tbody id='itemlist' >
          <tr>
            <td><input id='nama' name='nama_input[]' class='form-control' /></td>
            <td><input id='kode' readonly name='kode_input[]' class='form-control' /></td>
            <td><input id='harga' name='harga_input[]' class='form-control' onkeyup="sum();" /></td>
            <td><input id='jumlah' autocomplete="off" name='jumlah_input[]' class='form-control' onkeyup="sum();" /></td>
            <td><input id='total' name='total_input[]' class='form-control' value=" " /></td>
            <td></td>
          </tr>
        </tbody>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <button type="button" id="sample" class="btn btn-default">
              <b>Tambah</b>
            </button>
          </td>
        </tr>
      </table>

R.K.Saini · Accepted Answer · 2016-11-11 06:23:57Z

Here is the sample, try this

 $(function() {
   $(document).on('click', '.btn-remove', function() {
     // remove closest row on click of remove button
     $(this).closest('tr').remove();
   });

   $(document).on('input', 'input.harga,input.jumlah', function() {
     var hrg = $(this).closest("tr").find('input.harga').val();
     var jml = $(this).closest("tr").find('input.jumlah').val();
     var result = parseInt(hrg) * parseInt(jml);
     if (!isNaN(result)) {
       $(this).closest("tr").find('input.total').val(result);
     }
   })
 });


 function additem() {

   var rowHtml = '<tr>' +
     '<td><input name="nama_input[]" class="nama form-control" /></td>' +
     '<td><input readonly name="kode_input[]" class="kode form-control" /></td>' +
     '<td><input name="harga_input[]" class="harga form-control" /></td>' +
     '<td><input autocomplete="off" name="jumlah_input[]" class="jumlah form-control" /></td>' +
     '<td><input name="total_input[]" class="total form-control" /></td>' +
     '<td><button class="btn btn-small btn-default btn-remove"><b>Hapus</b></button></td>' +
     '</tr>';


   $('#itemlist').append(rowHtml);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed" style="margin-left: 10px;">
  <thead>
    <tr>
      <th width="100px">Nama</th>
      <th width="100px">Kode</th>
      <th width="100px">Harga</th>
      <th width="100px">Jumlah</th>
      <th width="100px">Total</th>
      <th width="80px"></th>
    </tr>
  </thead>

  <tbody id='itemlist'>
    <tr>
      <td>
        <input name="nama_input[]" class="nama form-control" />
      </td>
      <td>
        <input readonly name="kode_input[]" class="kode form-control" />
      </td>
      <td>
        <input name="harga_input[]" class="harga form-control" />
      </td>
      <td>
        <input autocomplete="off" name="jumlah_input[]" class="jumlah form-control" />
      </td>
      <td>
        <input name="total_input[]" class="total form-control" />
      </td>
      <td></td>
    </tr>
  </tbody>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <button type="button" class="btn btn-default" onclick="additem();
                            return false">
        <b>Tambah</b>
      </button>
    </td>
  </tr>
</table>

I hope It will help

Collectives™ on Stack Overflow

javascript function in dynamically input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related