Ticker

6/recent/ticker-posts

Menampilkan Hasil Perhitungan Secara Langsung Tanpa Klik Tombol Menggunakan Perintah Keyup JQuery

Desember 22, 2016
Pada kesempatan kali ini kita akan coba membuat suatu aplikasi sederhana untuk menampilkan hasil perhitungan tanpa harus mengklik tombol. Misalnya pada aplikasi penjualan kita memasukan nilai suatu barang yang harganya 25.000 kemudian barang tersebut ada diskonya sebesar 20%. Yang kita inginkan adalah nilai akhir / total yang harus dibayar itu secara otomatis langsung muncul tanpa harus klik tombol. Lihatlah gambar berikut,


Pada gambar diatas textbox "Yang Harus Dibayar" itu akan otomatis terisi setelah textbox "Diskon" terisi.

Dalam pembuatan aplikasi tersebut kita akan menggunakan perintah keyup pada JQuery. Berikut proses pembuatannya :

1. Buatlah tag HTML seperti berikut,
<table border="0" cellpadding="5" align="center">
  <form action="" method="post">
     <tr>
        <td>Harga :</td> 
        <td><input type="text" name="harga" id="harga" /></td>
     </tr> 
     <tr>
        <td>Diskon :</td> 
        <td><input type="text" name="diskon" id="diskon" /></td>
     </tr>
     <tr>
        <td>Yang Harus Dibayar :</td> 
        <td><input type="text" name="totBayar" id="totBayar" disabled /></td>
     </tr>  </form>
</table>



2. Buatlah sintak JQuerynya seperti berikut,
<script type="text/javascript">
  $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = parseInt($("#harga").val());
        var diskon  = parseInt($("#diskon").val());
        var total = harga - (harga*(diskon/100));
        $("#totBayar").val(total);
      });
  });
</script>

3. Jangan lupa sertakan library jquery.
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

4. Berikut sintak keseluruhannya,
<html>
<head>
  <title>Contoh Perhitungan Langsung</title> 
 <script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = parseInt($("#harga").val());
        var diskon  = parseInt($("#diskon").val());
        var total = harga - (harga*(diskon/100));
        $("#totBayar").val(total);
      });
    });
  </script>
</head>
<body>
<table border="0" cellpadding="5" align="center">
  <form action="" method="post">
     <tr>
        <td>Harga :</td> 
        <td><input type="text" name="harga" id="harga" /></td>
     </tr> 
     <tr>
        <td>Diskon :</td> 
        <td><input type="text" name="diskon" id="diskon" /></td>
     </tr>
     <tr>
        <td>Yang Harus Dibayar :</td> 
        <td><input type="text" name="totBayar" id="totBayar" disabled /></td>
     </tr>  </form>
</table> </body>
</html>

5. Simpan dengan nama penjualan.html
6. Jalankan file penjualan.html tersebut pada browser yang kita inginkan.

Untuk lebih jelas bisa lihat pada link berikut

Semoga bermanfaat..
Unknown

Diposting oleh Unknown

Posting Komentar

0 Komentar