jquery - javascript function in dynamically input -
i'm having issue using jquery function multiplication (math) dynamically created inputs (again created jquery). can't function bind new inputs. first row work, second row did not work (second row , more using dynamically input).
here 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 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 appreciated.
you not passing current id's of inputs sum method. , 1 more thing add jquery onkeyup event 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 = 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>
Comments
Post a Comment