Cara Menjumlahkan Otomatis Nilai dengan jQuery

01/10/2019    Risman Hakim    19     Website

Cara Menjumlahkan Otomatis Nilai dengan jQuery - Pertemuan kali ini saya akan berbagi tutorial sederhana tentang jQuery yaitu Cara Menjumlahkan Otomatis Nilai dengan jQuery, tentu dengan jQuery banyak sekali yang bisa kita lakukan selain membuat efek dan animasi kita juga bisa manipulasi data. Seperti yang akan saya buat berikut ini yaitu melakukan proses perhitungan secara otomatis, penasaran seperti apa dan bagaimana cara membuatnya ? ikuti langkah - langkahnya berikut ini.

1. Membuat file index.html

Baik, langkah pertama adalah membuat file html terlebih dahulu dan membuat beberapa form inputan untuk nilai - nilai yang akan nanti akan diinputkan. Silahkan kalian bisa mengetikan kodenya berikut ini. Pada kasus ini saya membuatnya dengan framework Bootstrap.

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row mt-3">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <input type="text" id="harga" class="form-control" placeholder="Harga Barang">
                        </div>
                        <div class="form-group">
                            <input type="text" id="jumlah" class="form-control" placeholder="Jumlah Barang">
                        </div>
                        <div class="form-group mb-0">
                            <input type="text" id="total" class="form-control" placeholder="Total" readonly="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

2. Membuat Proses Perhitungan

Setelah membuat form inputan, langkah selanjutnya adalah membuat proses perhitungan dengan jQuery, dimana kita akan memanfaatkan fungsi keyup yang akan diberikan kepada inputannya. Silahkan kalian ketikan kode jQuery berikut ini.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#jumlah, #harga").keyup(function() {
            var harga  = $("#harga").val();
            var jumlah = $("#jumlah").val();

            var total = parseInt(harga) * parseInt(jumlah);
            $("#total").val(total);
        });
    });
</script>

Setelah semua kode diatas telah diketikan, selanjutnya simpan kembali filenya kemudian silahkan buka dibrowser masing - masing. Maka proses perhitungan akan dijalankan ketika form input pertama (harga) dan inputan kedua (jumlah) diisi maka inputan ketiga (total) akan secara otomatis menampilkan hasil perhitungan dari inputan pertama dan kedua.

Cara Menjumlahkan Otomatis Nilai dengan jQuery

Baiklah, cukup sekian tutorial sederhana tentang jQuery yaitu Cara Menjumlahkan Otomatis Nilai dengan jQuery semoga tutorial ini bermanfaat :)

jQuery

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More