Berikut kita akan membahas aplikasi perhitungan menggunakan event keyup dengan jquery, fungsi dari event keyup disini apabila ada respon menggunakan keyboard maka fungsi yang ada didalamnya akan di laksanakan.
Head
Letakan code berikut diantara <head> code </head>Head
<title>Aplikasi Belanja Sederhana</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
function hitung() {
var harga = $("#harga").val();
var jumlah = $("#jumlah").val();
if(harga>0 && jumlah>0){
var total = parseInt(harga)*parseInt(jumlah);
$("#total").val(total);
diskon();
bonus();
}else{
$("#total").val('');
$("#diskon").val('');
$("#bonus").val('');
}
}
function diskon(){
var total = $("#total").val();
if(total>=500000){
var diskon = parseInt(total)*20/100;
$("#diskon").val(diskon);
}else if(total>=200000){
var diskon = parseInt(total)*15/100;
$("#diskon").val(diskon);
}else if(total>=100000){
var diskon = parseInt(total)*10/100;
$("#diskon").val(diskon);
}else if(total>=50000){
var diskon = parseInt(total)*5/100;
$("#diskon").val(diskon);
}else{
$("#diskon").val(0);
}
}
function bonus(){
var total = $("#total").val();
if(total>=500000){
var bonus = 'Tas Pinggang';
$("#bonus").val(bonus);
}else if(total>=200000){
var bonus = 'Payung';
$("#bonus").val(bonus);
}else if(total>=100000){
var bonus = 'Kaos';
$("#bonus").val(bonus);
}else if(total>=50000){
var bonus = 'Cangkir';
$("#bonus").val(bonus);
}else{
$("#bonus").val('Tidak Ada');
}
}
$("#harga").keyup(function(){
hitung();
});
$("#jumlah").keyup(function(){
hitung();
});
});
</script>
Body
Letakan code berikut diantara <body> code </body>
<h3>Aplikasi Belanja Sederhana</h3>
<table>
<tbody><tr>
<td width="120">Harga Satuan</td>
<td width="5">:</td>
<td><input type="text" name="harga" id="harga" size="15"></td>
</tr>
<tr>
<td width="120">Jumlah Barang</td>
<td width="5">:</td>
<td><input type="text" name="jumlah" id="jumlah" size="15"></td>
</tr>
<tr>
<td width="120">Total</td>
<td width="5">:</td>
<td><input type="text" name="total" id="total" size="15" readonly="readonly"></td>
</tr>
<tr>
<td width="120">Diskon</td>
<td width="5">:</td>
<td><input type="text" name="diskon" id="diskon" size="15" readonly="readonly"></td>
</tr>
<tr>
<td width="120">Bonus</td>
<td width="5">:</td>
<td><input type="text" name="bonus" id="bonus" size="25" readonly="readonly"></td>
</tr>
</tbody></table>
Sumber
0 komentar:
Posting Komentar