Perhitungan Transaksi Otomatis Dengan JQuery

Melengkapi postingan terdahulu "Aplikasi Perhitungan Sederhana Dengan Javascript | Animate CC". Tutorial berikut adalah perhitungan Harga Barang dikalikan dengan Jumlah Barang, dimana hasilnya akan ditampilkan secara otomatis.

Bentuk ini sangat sederhana untuk membuat formulir penjualan. Namun dari bentuk yang sederhana ini dapat dengan mudah untuk dipahami bagi pemula, harapannya dapat memicu untuk dikembangkan menjadi lebih luas lagi.

(adsbygoogle = window.adsbygoogle || []).push({});

Untuk mengetahui dengan cepat tampilan dari kode dibawah ini, gunakan HTMLPad 2000 dengan menggunakan tab Preview.

Tempel kode berikut pada HTMLPad 2000

<head>
    <meta charset="UTF-8">
    <title>Tutorial Formulir Penjualan Sederhana</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>
<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>
<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="ketik disini...">
                        </div>
                        <div class="form-group">
                            <input type="text" id="jumlah" class="form-control" placeholder="ketik disini...">
                        </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>

Demikianlah tutorial ini, semoga menambah pengetahuan dasar Anda untuk tambah semangat belajar.

Kata-Kata Bijak Thomas Alva Edison

Saya bangga dengan fakta bahwa saya tidak pernah menciptakan senjata untuk membunuh.
Tak ada aturan di sini. Kita tengah mencobanya untuk mencapai sesuatu.
Hal yang dapat diciptakan oleh pikiran seseorang, karakter dapat mengendalikan hal tersebut.
Non-kekerasan mengarah pada etika tertinggi, yang merupakan tujuan dari semua evolusi. Sampai kita berhenti melukai semua makhluk hidup lainnya, artinya kita masih liar.
Kesuksesan datang pada orang yang bergerak cepat ketika ia sedang menunggu.
Sayangnya, tampaknya ada lebih banyak peluang di luar sana dari pada kemampuan. Kita harus ingat bahwa nasib baik sering terjadi ketika kesempatan bertemu dengan persiapan.
Rata-rata otak manusia, tidak sampai melihat satu perseribu dari apa yang dilihat olehnya.
Kelemahan terbesar kita adalah menyerah. Cara paling tepat untuk sukses adalah selalu mencoba satu kali lagi.
Ketidakpuasan adalah kebutuhan pertama dari kemajuan.
Saya belum gagal. Saya baru saja menemukan 10.000 cara yang tidak akan berhasil.
Hanya karena sesuatu tidak berjalan sesuai dengan yang anda recanakan, tidak berarti bahwa hal tersebut sia-sia.
Otak rata-rata manusia tak melihat satu perseribu dari apa yang dilihat olehnya.
Ketika aku sungguh-sungguh memutuskan bahwa sebuah hasil layak untuk didapatkan, aku mencoba untuk menggapainya dan melakukan percobaan demi percobaan sampai berhasil.