contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074

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 Terkait

Diskusi