Menampilkan data secara langsung tanpa harus klik tombol menggunakan Jquery


Pada artikel kali ini saya akan mencoba untuk memberikan tutorial tentang bagaimana menampilkan data tanpa harus klik tombol. Misalkan gini ada user yang sedang menggunakan aplikasi penjualan, user tersebut melihat jumlah yang harus  dibayar adalah 30.000  lalu ada diskon 10% sehingga secara otomatis aplikasi tersebut menampilkan total bayarnya (sesudah diskon) 27.000. Untuk Lebih Jelasnya lihat gambar berikut ini.

Untuk melihat demonya klik disini.

Requirement :
– Download Jquery.js
– Download Editor PHP/HTML misalnya Adobe Dreamweaver, Notepad ++, CodeLobster, dll.

Cara Membuatnya :

  1. Ketikkan Kode berikut di PHP/HTML Editor kesayangan anda.
    <html>
    <head>
    <title>Penjualan</title>
    	<script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            $(document).ready(function() {
    			$('#diskon').keyup(function(){
    			<!-- Ambil nilai bayar dan diskon !-->
    			var bayar=parseInt($('#bayar').val());
    			var diskon=parseInt($('#diskon').val());
    
    			<!-- Perhitungan bayar-(diskon/100 x bayar) !-->
    			var total_bayar=bayar-(diskon/100)*bayar;
    			$('#Tbayar').val(total_bayar);
    			});
    		});
            </script>
    </head>
    	<body>
        	<table border="0" cellpadding="5" align="center">
            	<form action="" method="post">
                <tr>
                	<td>Total Bayar</td> <td> : </td> <td><input type="text" name="bayar" id="bayar" /> (dalam Rp)</td>
                </tr>
                <tr>
                    <td>Diskon</td> <td> : </td> <td><input type="text" name="diskon" id="diskon" /> % </td>
                </tr>
                <tr>
                    <td>Total Bayar (sesudah diskon)</td> <td> : </td>
                    <td><input type="text" name="Tbayar" id="Tbayar"  readonly="readonly" /> (dalam Rp)</td>
                </tr>
                </tr>
                </form>
            </table>
    	</body>
    </html>
    

    Penjelasan Kode :

    • Baris 4 : Karena kiata menggunakan Jquery, maka kita harus sertakan library jquery
    • Baris 7 : $(‘#diskon’).keyup artinya ketika inputan yang idnya adalah diskon (baris ke-26) diketikkan sesuatu maka kerjakan kode di bawah ini
    • Baris 9 : buat variabel bayar dimana nilai dari variabel tersebut diambil dari nilai yang diketikkan di inputan yang berid bayar (baris ke-23)
    • Baris 10 : buat variabel diskon dimana nilai dari variabel tersebut diambil dari nilai yang diketikkan di inputan yang berid diskon (baris ke-26)
    • Baris 13 : ini perhitungannya, jadi buat variabel bayar dengan rumus total_bayar=bayar – (diskon/100) * bayar
    • Baris 14 : Hasil dari perhitungan tadi dimasukan ke inputan yang berid TBayar(baris ke-30)
  2. Save/Simpan dengan nama penjualan.html
  3. Buka penjualan.html di browser kesayangan anda.

Artikel Terkait :

About Wendi
An Extraordinary man wannabe. add my FB : https://www.facebook.com/wendi.octavious

One Response to Menampilkan data secara langsung tanpa harus klik tombol menggunakan Jquery

  1. Pingback: Cara Mudah Cek Kekuatan/Kerumitan Password dengan JQuery « belajarbuatprogram

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s