Logika lanjutan

Desain Interface/Tampilan berikut:

<form enctype="multipart/form-data" method="POST" action=""

class="form-horizontal">
<div class="form-group row margin-top-30">
<div class="col-md-3">
<label class="control-label col-form-label">Nama
Barang</label>
</div>
<div class="col-md-2">
<b> <input type="text" class="form-control"
id="idnamabarang" >
</b>
</div>
</div>
<div class="form-group row margin-top-30">
<div class="col-md-3">
<label class="control-label col-form-label">Harga
Beli</label>
</div>
<div class="col-md-2">
<b> <input type="number" class="form-control"
id="hrg_beli" name="hargabeli" value=0 onkeyup="jum();">
</b>
</div>
</div>
<div class="form-group row margin-top-30">
<div class="col-md-3">
<label class="control-label col-form-label">Jumlah
Pesan</label>
</div>
<div class="col-md-2">
<b> <input type="text" class="form-control"
id="jml_barang" name="jumlahbarang" value=0 onkeyup="jum();"> </b>
</div>
</div>

<div class="form-group row margin-top-30">

<div class="col-md-3">
 <label class="control-label col-form-label"> Bayar
Sebelum diskon</label>
</div>
<div class="col-md-2">
<b> <input type="number" class="form-control"
id="byr_barang" name="bayar" readonly>
</b>
</div>
</div>
<div class="form-group row margin-top-30">
<div class="col-md-3">
<label class="control-label col-form-label"> Nilai Diskon
(Rp)</label>
</div>
<div class="col-md-2">
<b> <input type="number" class="form-control"
id="diskonrp" name="diskonrupiah" readonly>
</b>
</div>
</div>
<div class="form-group row margin-top-30">
<div class="col-md-3">
<label class="control-label col-form-label"> Total Bayar
Setelah diskon: </label>
</div>
<div class="col-md-2">
<b> <input type="number" class="form-control"
name="totalbayar" id="total_byr" readonly>
</b>
</div>
</div>
<div class="form-group row margin-top-30">
<div class="col-md-3">
<label class="control-label col-form-label"> Keterangan
Voucher</label>
</div>
<div class="col-md-8">
<b> <input type="text" class="form-control" id="voucher"
name="ketVoucher" readonly>
</b>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<button type="button" class="btn btn-success"
onclick="cekvoucher()">Cek Voucher</button>
 </div>
<div class="col-sm-4">
<input type="reset" name="batal" class="btn btn-success"
value="Batal">
</div>
</div>
</form>

Logika Program Berikut:

1. Logika untuk menghitung diskon, bayar dan rotal bayar

<script>

function jum() {
const diskon = 0.1;
var beli = document.getElementById('hrg_beli').value;
var jumlah = document.getElementById('jml_barang').value;
var bayarsebelumdiskon= beli*jumlah;

document.getElementById("diskonrp").value = diskon*bayarsebelumdiskon;
var bayarsetelahdiskon = parseInt(bayarsebelumdiskon)-
document.getElementById("diskonrp").value;

if (!isNaN(bayarsebelumdiskon)) {
document.getElementById("byr_barang").value = bayarsebelumdiskon;
document.getElementById("total_byr").value = bayarsetelahdiskon;
}
}
</script>

2. Logika untuk mendapatkan Voucher

</script>
function cekvoucher() {
var total = document.getElementById("total_byr").value;
if (total <= 1000) {
document.getElementById('voucher').value = "Maaf Anda
Tidak Mendapat Voucher Belanja ";
}
else if (total >= 1001 && total <= 10000) {
 document.getElementById('voucher').value = "Anda Mendapat
Voucher Belanja Rp 1.000";
}
else if (total >= 10001 && total <= 100000) {
document.getElementById('voucher').value = "Anda Mendapat
Voucher Belanja Rp 10.000";
}
else if (total >= 100001 && total < 1000000) {
document.getElementById('voucher').value = "Anda Mendapat
Voucher Belanja Rp 100.000";
}
else
document.getElementById('voucher').value = "Anda Mendapat
Voucher Belanja Rp 1000.000";
}

</script>