contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Menampilkan Hasil Penjumlahan Textbox otomatis dg Jquery

Posted in Javascript Jquery Life at 20 November 2016 With 0 Comments

OK.. sahabat suckittrees.com, kali ini admin akan berbagi Cara Menampilkan Hasil Penjumlahan di Textbox yang Hasilnya langsung tampil di Textbox secara otomatis tanpa harus di ketik terlebih dahulu , kali ini kita buat dengan Jquery

artikel sebelumnya admin juga sudah menjelaskan Cara Membuat Penjumlahan Otomatis dengan Javascript disini

▼ Download Source Code Dibawah Ini ▼


Pada artikel kali ini saya akan mencoba untuk memberikan tutorial tentang bagaimana menampilkan data tanpa harus klik tombol. Misalkan 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.

menampilkan otomatis di textbox jquery

Membuat Penjumlahan Otomatis di Texbox

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

CODE HTML :

    <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>

 Silahkan anda Jalankan.. di browser anda, sekian.. cara membuat penjumlahan otomatis di textbox dengan jquery.. semoga bermanfaat

Artikel Rekomendasi



Artikel Terkait

Diskusi