I have Basic Idea to implemented on my Form with this UI Dynamic form on Laravel so i want if Kode valid (onChanged) on Text Kode put name Product & HNA to each Text Input.
I wan implemented with javascript, but i no idea. Because input field after number 3 i crated with javascript.
This my HTML and javascript:
var pitem = 2;
function add_baris()
{
if(pitem<=10)
{
//Tambah inner baris html
$("#tambahan").append('<tr><td>'+pitem+'.</td><td><input type="text" class="form-control input-sm" name="kode[]"></td><td><input type="text" class="form-control input-sm" name="material[]" readonly></td><td><input type="text" class="form-control input-sm" name="hna[]"></td><td><input type="text" class="form-control input-sm" name="qty[]"></td><td><input type="text" class="form-control input-sm" name="value[]"></td><td><input type="text" class="form-control input-sm" name="persen[]"></td><td><input type="text" class="form-control input-sm" name="biaya[]"></td><td><button class="btn btn-sm btn-danger" title="Hapus"><span class="fa fa-trash"></span></button></td></tr>');
//Tambah baris
pitem++;
//Hapus baris
$("#tambahan").find("button").on('click',function(){
$(this).parent().parent().remove();
if(pitem!=2){
document.getElementById('jitem').value=pitem-1;
pitem=pitem-1;
}
});
}
else{
alert('Produk tidak boleh lebih dari 10 item');
}
}
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Lampiran Total Estimasi</h3>
</div>
<div class="panel-body">
<form action="" method="get" enctype="multipart/form-data" class="form-horizontal">
<input type="hidden" name="_token" value="f5H1hrktb5woVS982DE1FGzTCWu8J1SPeQRcfVrQ">
<div class="container-fluid">
<div class="row">
<div class="form-group">
<div class="col-sm-2">
<label>Nomor</label>
<input type="text" class="form-control input-sm" value="APS20181127151641" disabled="">
</div>
<div class="col-sm-4">
<label>Periode</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control input-sm" value="2018-11-09" disabled="">
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-sm" value="2018-12-01" disabled="">
</div>
</div>
</div>
<div class="col-sm-6">
<label>Monitoring</label>
<input type="text" class="form-control input-sm" value="ujjj jjj jj" disabled="">
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" id="tengah" width="2%">No</th>
<th rowspan="2" id="tengah" width="10%">Kode</th>
<th rowspan="2" id="tengah">Produk</th>
<th rowspan="2" id="tengah" width="10%">HNA</th>
<th colspan="2" id="tengah">Total Estimasi</th>
<th colspan="2" id="tengah">Biaya</th>
<th rowspan="2" width="1%" id="tengah">
<button type="button" class="btn btn-sm btn-success" onclick="add_baris();"><span class="glyphicon glyphicon-plus-sign"></span></button>
</th>
</tr>
<tr>
<th width="8%">Qty</th>
<th width="15%">Values</th>
<th width="5%">%</th>
<th width="15%">Rupiah</th>
</tr>
</thead>
<tbody id="tambahan">
<tr>
<td>1.</td>
<td><input type="text" class="form-control input-sm" id="kode" name="kode[]"></td>
<td><input type="text" class="form-control input-sm" id="material" name="material[]" readonly=""></td>
<td><input type="text" class="form-control input-sm" id="hna" name="hna[]"></td>
<td><input type="text" class="form-control input-sm" id="qty" name="qty[]"></td>
<td><input type="text" class="form-control input-sm" id="value" name="value[]"></td>
<td><input type="text" class="form-control input-sm" id="persen" name="persen[]"></td>
<td><input type="text" class="form-control input-sm" id="biaya" name="biaya[]"></td>
<td>
<button class="btn btn-sm btn-danger" title="Hapus" disabled=""><span class="fa fa-trash"></span></button>
</td>
</tr>
<tr>
<td>2.</td>
<td><input type="text" class="form-control input-sm" id="kode" name="kode[]"></td>
<td><input type="text" class="form-control input-sm" id="material" name="material[]" readonly=""></td>
<td><input type="text" class="form-control input-sm" id="hna" name="hna[]"></td>
<td><input type="text" class="form-control input-sm" id="qty" name="qty[]"></td>
<td><input type="text" class="form-control input-sm" id="value" name="value[]"></td>
<td><input type="text" class="form-control input-sm" id="persen" name="persen[]"></td>
<td><input type="text" class="form-control input-sm" id="biaya" name="biaya[]"></td>
<td>
<button class="btn btn-sm btn-danger" title="Hapus" disabled=""><span class="fa fa-trash"></span></button>
</td>
</tr>
<tr><td>2.</td><td><input type="text" class="form-control input-sm" name="kode[]"></td><td><input type="text" class="form-control input-sm" name="material[]" readonly=""></td><td><input type="text" class="form-control input-sm" name="hna[]"></td><td><input type="text" class="form-control input-sm" name="qty[]"></td><td><input type="text" class="form-control input-sm" name="value[]"></td><td><input type="text" class="form-control input-sm" name="persen[]"></td><td><input type="text" class="form-control input-sm" name="biaya[]"></td><td><button class="btn btn-sm btn-danger" title="Hapus"><span class="fa fa-trash"></span></button></td></tr><tr><td>3.</td><td><input type="text" class="form-control input-sm" name="kode[]"></td><td><input type="text" class="form-control input-sm" name="material[]" readonly=""></td><td><input type="text" class="form-control input-sm" name="hna[]"></td><td><input type="text" class="form-control input-sm" name="qty[]"></td><td><input type="text" class="form-control input-sm" name="value[]"></td><td><input type="text" class="form-control input-sm" name="persen[]"></td><td><input type="text" class="form-control input-sm" name="biaya[]"></td><td><button class="btn btn-sm btn-danger" title="Hapus"><span class="fa fa-trash"></span></button></td></tr></tbody>
</table>
</div>
<input type="hidden" id="jitem" name="jitem" value="1">
<input type="submit" class="btn-sm btn btn-success" value="Save">
<input type="reset" class="btn-sm btn btn-warning" value="Batal">
</form>
</div>
</div>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire