Penjumlahan input text otomatis dengan JQuery
24-04-2019 Admin FnF
Penjumlahan input text otomatis dengan JQuery

Selamat datang di website FnF Indonesia. Apa saja yang harus dipersiapkan untuk belajar pemrograman? FnF Indonesia akan membantu untuk memberitahukan apa saja yang harus dipersiapkan. Yuk Simak di indofnf.com.

Untuk menampilkan hasil perhitungan tanpa harus mengklik tombol. Misalnya pada aplikasi penjumlahan kita memasukan nilai valuenya 25.000 kemudian terdapat diskonya sebesar 20%. Yang kita inginkan adalah nilai akhir / total yang harus dibayar itu secara otomatis langsung muncul tanpa harus klik tombol. Silahkan dipelajari :

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 berikutKita buat Function dulu


<script src="http://code.jquery.com/jquery-2.1.4.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>

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 penjumlahan.html
6. Jalankan file penjualan.html tersebut pada browser yang kita inginkan.

Selamat mencoba, semoga bermanfaat.