CARA MEMBUAT HASIL JUMLAH ATAU HITUNG OTOMATIS DENGAN JQUERY

Hallo pembaca,
Kali ini saya akan menulis tentang bagaimana menjumlahkan beberapa textfield secara otomatis menggunakan plugin jquery, Dalam tulisan ini kita akan mencoba membuat penjumlahan atau perhitungan total otomatis setelah kita memasukkan atau menginput data, tanpa perlu menggunakan tombol submit. Untuk proses seperti ini kita akan membuat dengan bantuan Javascript , Kenapa harus dengan Javascript ? karena program javascript berjalan disisi client atau pengguna, yang artinya program akan di eksekusi di browser kesayangan anda, bukan di server, sehingga prosesnya akan lebih cepat dan bisa langsung di ekseskusi. 
Oke langsung saja, hasil akhirnya nanti akan seperti gambar dibawah ini :


Silahkan anda buat file php dan berinama "Hitung.php" kemudian salinlah skrip lengkapnya dibawah ini :

---------------------------------------------------------------------------------------------------------------------------------
<html>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function(){           
            $('#txtLPembayaran').keyup(function(){
                var pembayaran    = parseInt($('#txtTPembayaran').val());
                var luas         = parseInt($('#txtLPembayaran').val());
                var jumlah         = pembayaran * luas;
                $('#txtJPembayaran').val(jumlah);
                total();
            });
           
            $('#txtTPembayaran').keyup(function(){
                var pembayaran    = parseInt($('#txtTPembayaran').val());
                var luas         = parseInt($('#txtLPembayaran').val());
                var jumlah         = pembayaran * luas;
                $('#txtJPembayaran').val(jumlah);
                total();
            });
           
            $('#txtLBarang').keyup(function(){
                var barang        = parseInt($('#txtTBarang').val());
                var luas         = parseInt($('#txtLBarang').val());
                var jumlah         = barang * luas;
                $('#txtJBarang').val(jumlah);
                total();
            });
           
            $('#txtTBarang').keyup(function(){
                var barang        = parseInt($('#txtTBarang').val());
                var luas         = parseInt($('#txtLBarang').val());
                var jumlah         = barang * luas;
                $('#txtJBarang').val(jumlah);
                total();
            });
           
            $('#txtLLesehan').keyup(function(){
                var lesehan        = parseInt($('#txtTLesehan').val());
                var luas         = parseInt($('#txtLLesehan').val());
                var jumlah         = lesehan * luas;
                $('#txtJLesehan').val(jumlah);
                total();
            });
           
            $('#txtTLesehan').keyup(function(){
                var lesehan        = parseInt($('#txtTLesehan').val());
                var luas         = parseInt($('#txtLLesehan').val());
                var jumlah         = lesehan * luas;
                $('#txtJLesehan').val(jumlah);
                total();
            });
           
            $('#txtLSampah').keyup(function(){
                var sampah        = parseInt($('#txtTSampah').val());
                var luas         = parseInt($('#txtLSampah').val());
                var jumlah         = sampah * luas;
                $('#txtJSampah').val(jumlah);
                total();
            });
           
            $('#txtTSampah').keyup(function(){
                var sampah        = parseInt($('#txtTSampah').val());
                var luas         = parseInt($('#txtLSampah').val());
                var jumlah         = sampah * luas;
                $('#txtJSampah').val(jumlah);
                total();
            });
           
            function total(){
                var jpembayaran    = parseInt($('#txtJPembayaran').val());
                var jbarang     = parseInt($('#txtJBarang').val());
                var jlesehan    = parseInt($('#txtJLesehan').val());
                var jsampah     = parseInt($('#txtJSampah').val());
                var total         = jpembayaran + jbarang + jlesehan + jsampah;
                $('#txtTotal').val(total);
            };
           
        });
    </script>
<body>
                    <table >
                        <thead>
                            <tr>
                                <th>Rincian</th>
                                <th>Luas (m&sup2;)</th>
                                <th>&nbsp;</th>
                                <th>Tarif (Rp)</th>
                                <th>Jumlah (Rp)</th>
                          </tr>
                        </thead>
                       
                        <tbody>
                            <tr>
                                <td>Pembayaran Retribusi Pasar</td>
                                <td><input name="txtLPembayaran" id="txtLPembayaran" style="height:25px; width:100px" /></td>
                                <td>X</td>
                                <td><input name="txtTPembayaran" id="txtTPembayaran" style="height:25px; width:100px" /></td>
                                <td><input name="txtJPembayaran" id="txtJPembayaran" style="height:25px; width:100px" disabled="disabled" value="0"/></td>
                            </tr>
                            <tr>
                                <td>Barang ditinggal</td>
                                <td><input name="txtLBarang" id="txtLBarang" style="height:25px; width:100px" /></td>
                                <td>X</td>
                                <td><input name="txtTBarang" id="txtTBarang" style="height:25px; width:100px" /></td>
                                <td><input name="txtJBarang" id="txtJBarang" style="height:25px; width:100px" disabled="disabled" value="0"/></td>
                            </tr>
                            <tr>
                                <td>Lesehan</td>
                                <td><input name="txtLLesehan" id="txtLLesehan" style="height:25px; width:100px" /></td>
                                <td>X</td>
                                <td><input name="txtTLesehan" id="txtTLesehan" style="height:25px; width:100px" /></td>
                                <td><input name="txtJLesehan" id="txtJLesehan" style="height:25px; width:100px" disabled="disabled" value="0"/></td>
                            </tr>
                            <tr>
                                <td>Sampah</td>
                                <td><input name="txtLSampah" id="txtLSampah" style="height:25px; width:100px" /></td>
                                <td>X</td>
                                <td><input name="txtTSampah" id="txtTSampah" style="height:25px; width:100px" /></td>
                                <td><input name="txtJSampah" id="txtJSampah" style="height:25px; width:100px" disabled="disabled" value="0"/></td>
                            </tr>
                         </tbody>
                       
                         <tfoot>
                            <tr>
                                <th>Total</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                 <th><input name="txtTotal" id="txtTotal" style="height:25px; width:100px" disabled="disabled" /></th>
                               </tr>
                           </tfoot>
                       </table>
---------------------------------------------------------------------------------------------------------------------------------

Keterangan dari skrip diatas :
1.     Membuat fungsi total 
        function total(){
                var jpembayaran    = parseInt($('#txtJPembayaran').val());
                var jbarang     = parseInt($('#txtJBarang').val());
                var jlesehan    = parseInt($('#txtJLesehan').val());
                var jsampah     = parseInt($('#txtJSampah').val());
                var total         = jpembayaran + jbarang + jlesehan + jsampah;
                $('#txtTotal').val(total);
            };

2.  Membuat fungsi TextField Luas Pembayaran saat dimasukkan data
     $('#txtLPembayaran').keyup(function(){
                var pembayaran    = parseInt($('#txtTPembayaran').val());
                var luas         = parseInt($('#txtLPembayaran').val());
                var jumlah         = pembayaran * luas;
                $('#txtJPembayaran').val(jumlah);
                total();
            });

3.  Membuat fungsi TextField Tarif Pembayaran saat dimasukkan data
     $('#txtTPembayaran').keyup(function(){
                var pembayaran    = parseInt($('#txtTPembayaran').val());
                var luas         = parseInt($('#txtLPembayaran').val());
                var jumlah         = pembayaran * luas;
                $('#txtJPembayaran').val(jumlah);
                total();
            });

4.  Membuat fungsi TextField Luas Barang saat dimasukkan data
     $('#txtLBarang').keyup(function(){
                var barang        = parseInt($('#txtTBarang').val());
                var luas         = parseInt($('#txtLBarang').val());
                var jumlah         = barang * luas;
                $('#txtJBarang').val(jumlah);
                total();
            });

5.  Membuat fungsi TextField Tarif Barang saat dimasukkan data
     $('#txtTBarang').keyup(function(){
                var barang        = parseInt($('#txtTBarang').val());
                var luas         = parseInt($('#txtLBarang').val());
                var jumlah         = barang * luas;
                $('#txtJBarang').val(jumlah);
                total();
            });

6.  Membuat fungsi TextField Luas Lesehan saat dimasukkan data
     $('#txtLLesehan').keyup(function(){
                var lesehan        = parseInt($('#txtTLesehan').val());
                var luas         = parseInt($('#txtLLesehan').val());
                var jumlah         = lesehan * luas;
                $('#txtJLesehan').val(jumlah);
                total();
            });

7.  Membuat fungsi TextField Tarif Lesehan saat dimasukkan data
     $('#txtTLesehan').keyup(function(){
                var lesehan        = parseInt($('#txtTLesehan').val());
                var luas         = parseInt($('#txtLLesehan').val());
                var jumlah         = lesehan * luas;
                $('#txtJLesehan').val(jumlah);
                total();
            });


8.  Membuat fungsi TextField Luas Sampah saat dimasukkan data
     $('#txtLSampah').keyup(function(){
                var sampah        = parseInt($('#txtTSampah').val());
                var luas         = parseInt($('#txtLSampah').val());
                var jumlah         = sampah * luas;
                $('#txtJSampah').val(jumlah);
                total();
            });


9.  Membuat fungsi TextField Tarif Sampah saat dimasukkan data
     $('#txtTSampah').keyup(function(){
                var sampah        = parseInt($('#txtTSampah').val());
                var luas         = parseInt($('#txtLSampah').val());
                var jumlah         = sampah * luas;
                $('#txtJSampah').val(jumlah);
                total();
            });


Selesai sudah, anda bisa menjalankan file "Hitung.php" dengan browser kesayangan anda,dan lihat hasilnya. Anda bisa mencobanya menggunakan skrip yang lengkap yang bisa diambil disini, semoga skrip yang anda ambil bisa bermanfaat untuk pembelajaran anda.
Terimakasih
Selamat Belajar

0 Response to "CARA MEMBUAT HASIL JUMLAH ATAU HITUNG OTOMATIS DENGAN JQUERY"

Post a Comment