- Beranda
- Programmer Forum
[ASK] Menjumlah Field Inputan Dinamis Menggunakan Javascript
...
TS
5433273
[ASK] Menjumlah Field Inputan Dinamis Menggunakan Javascript
Malam para mastah .. mohon bantuannya nih nubi masih bingung cara aplikasikan keinginan dimana ane punya field yang dinamis bisa di tambah dan di kurang .. nah itu nntinya isi/value tsb akan di jumlahkan pada field total, berikut gambarannya skripnya
Nah namabarang, qty, harga itu bisa ditambah / dihapus dinamis .. jadi yg buat ane bingung tuh gimana yah menghitung jumlah value qty dan price ketika button hitung_jumlah di klik .. jadi rumusannya bgini
Mohon bantuannya mastah
HTML Code:
<form class="form add"id="form_inputPO" data-id="" novalidate>
<button type="button" class="btn btn-primary tambah_barang">Tambah barang</button>
<div class="form-group item">
<label for="Item">Nama Barang: <span class="required">*</span></label>
<input type="text" class="form-control" name="data[item][]" id="item" value="" required>
</div>
<div class="form-group qty">
<label for="Qty">Quantity: <span class="required">*</span></label>
<input type="number" value="0" min="0" class="form-control" name="data[qty][]" id="qty" value="" placeholder="0" required>
</div>
<div class="form-group price">
<label for="Price">Harga: <span class="required">*</span></label>
<input type="text" value="0" class="form-control" name="data[price][]" id="price" value="" placeholder="0" required>
</div>
<div id="looping_barang"></div>
<hr class='footer-item'>
<p><button type="button" class="btn btn-success hitung_harga">Hitung Harga</button></p>
<div class="form-group total">
<label for="Total">TOTAL: <span class="required">*</span></label>
<input type="number" min="0" class="form-control" name="total" id="total" value="" placeholder="0" required>
</div>
<div class="button_container" style="text-align: center">
<button type="submit" class="saving">Simpan</button>
<input type="button" class="lightbox_close" value="Batal">
</div>
</form>
<skrip>
$(document).ready(function(){
var barisN = 1;
$(document).on('click', '.tambah_barang', function(e){
e.preventDefault();
barisN++;
$('#looping_barang').append(
'<div class="looping_barang" id="looping-'+barisN+'" ><hr class="looping-item"><p><button type="button" name="remove" idx="'+barisN+'" class="btn btn-danger btn_remove">Hapus</button></p><div class="form-group"><label for="Item">Nama Barang: <span class="required">*</span></label><input type="text" class="form-control" name="data[item][]" id="item" value="" required></div><div class="form-group"><label for="Qty">Quantity: <span class="required">*</span></label><input type="number" value="0" min="0" class="form-control qty-looping" name="data[qty][]" id="qty" value="" placeholder="0" required></div><div class="form-group"><div class="form-group"><label for="Price">Harga: <span class="required">*</span></label><input type="text" value="0" class="form-control price-looping" name="data[price][]" id="price" value="" placeholder="0" required></div></div>'
);
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr('idx');
$('#looping-'+button_id+'').remove();
});
});
</skrip>
<button type="button" class="btn btn-primary tambah_barang">Tambah barang</button>
<div class="form-group item">
<label for="Item">Nama Barang: <span class="required">*</span></label>
<input type="text" class="form-control" name="data[item][]" id="item" value="" required>
</div>
<div class="form-group qty">
<label for="Qty">Quantity: <span class="required">*</span></label>
<input type="number" value="0" min="0" class="form-control" name="data[qty][]" id="qty" value="" placeholder="0" required>
</div>
<div class="form-group price">
<label for="Price">Harga: <span class="required">*</span></label>
<input type="text" value="0" class="form-control" name="data[price][]" id="price" value="" placeholder="0" required>
</div>
<div id="looping_barang"></div>
<hr class='footer-item'>
<p><button type="button" class="btn btn-success hitung_harga">Hitung Harga</button></p>
<div class="form-group total">
<label for="Total">TOTAL: <span class="required">*</span></label>
<input type="number" min="0" class="form-control" name="total" id="total" value="" placeholder="0" required>
</div>
<div class="button_container" style="text-align: center">
<button type="submit" class="saving">Simpan</button>
<input type="button" class="lightbox_close" value="Batal">
</div>
</form>
<skrip>
$(document).ready(function(){
var barisN = 1;
$(document).on('click', '.tambah_barang', function(e){
e.preventDefault();
barisN++;
$('#looping_barang').append(
'<div class="looping_barang" id="looping-'+barisN+'" ><hr class="looping-item"><p><button type="button" name="remove" idx="'+barisN+'" class="btn btn-danger btn_remove">Hapus</button></p><div class="form-group"><label for="Item">Nama Barang: <span class="required">*</span></label><input type="text" class="form-control" name="data[item][]" id="item" value="" required></div><div class="form-group"><label for="Qty">Quantity: <span class="required">*</span></label><input type="number" value="0" min="0" class="form-control qty-looping" name="data[qty][]" id="qty" value="" placeholder="0" required></div><div class="form-group"><div class="form-group"><label for="Price">Harga: <span class="required">*</span></label><input type="text" value="0" class="form-control price-looping" name="data[price][]" id="price" value="" placeholder="0" required></div></div>'
);
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr('idx');
$('#looping-'+button_id+'').remove();
});
});
</skrip>
Nah namabarang, qty, harga itu bisa ditambah / dihapus dinamis .. jadi yg buat ane bingung tuh gimana yah menghitung jumlah value qty dan price ketika button hitung_jumlah di klik .. jadi rumusannya bgini
Quote:
Mohon bantuannya mastah
Diubah oleh 5433273 22-05-2018 14:38
nona212 memberi reputasi
1
3.2K
2
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Mari bergabung, dapatkan informasi dan teman baru!
Programmer Forum
20.2KThread•4.4KAnggota
Urutkan
Terlama
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru