Format Rupiah di Javascript

lebakcyber.net – Format Rupiah di Javascript. Oke jadi pada kesempatan kali ini kita akan belajar bagaimana cara untuk membuat sebuah format rupiah pada Javascript yang pastinya akan sangat berguna bagi kalian yang sedang membuat sebuah aplikasi mengenai keuangan.

Contohnya pada saat kita memasukan angka yang jumlahnya ribuan, nanti akan muncul titik pemisah pada 3 angka terakhir dan juga format rupiah tersebut juga bisa digunakan untuk angka jutaan bahkan milyaran.

Sekarang kita akan mencoba membuat sebuah form untuk menginputkan sebuah angka yang pada saat diinput akan secara otomatis memformat angka tersebut kedalam format ribuan, ratusan bahkan jutaan.

Jadi langsung saja kita buat sebuah file dengan nama index.html baru untuk mempraktekan tutorial kali ini lalu masukan perintah seperti dibawah ini :

<!DOCTYPE html>
<html>

<head>
    <title>Cara Format Rupiah Dengan Menggunakan Javascript</title>
</head>

<body>

    <style type="text/css">
        body {
            font-family: sans-serif;
        }

        .kotak {
            width: 350px;
            margin: auto;
            margin-top: 15px;
            padding: 10px;
        }

        p {
            margin-bottom: 20px;
            color: #0004ff;
        }

        input {
            text-align: right;
            width: 100%;
            margin-bottom: 20px;
            margin-top: 10px;
            padding: 7px 10px;
            font-size: 18px;
        }
    </style>

    <center>
        <h1>Format Rupiah Menggunakan Javascript <br /> www.lebakcyber.net</h1>
    </center>

    <div class="kotak">
        <span>Input Jumlah Rupiah. :</span>
        <input type="text" id="rupiah" />
    </div>

    <center>
        <h1>Belajar Javascript di www.lebakcyber.net</h1>
    </center>


    <script type="text/javascript">
        var rupiah = document.getElementById('rupiah');
        rupiah.addEventListener('keyup', function(e) {
            // tambahkan 'Rp.' pada saat form di ketik
            // gunakan fungsi formatRupiah() untuk mengubah angka yang di ketik menjadi format angka
            rupiah.value = formatRupiah(this.value, 'Rp. ');
        });

        /* Fungsi formatRupiah */
        function formatRupiah(angka, prefix) {
            var number_string = angka.replace(/[^,\d]/g, '').toString(),
                split = number_string.split(','),
                sisa = split[0].length % 3,
                rupiah = split[0].substr(0, sisa),
                ribuan = split[0].substr(sisa).match(/\d{3}/gi);

            // tambahkan titik jika yang di input sudah menjadi angka ribuan
            if (ribuan) {
                separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
            return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
        }
    </script>
</body>

</html>

Oke sekarang kita coba buka file index.html tersebut melalui browser lalu inputkan berapa rupiah yang kita inginkan pada form Input Jumlah Rupiah. Nanti hasilnya akan seperti pada gambar dibawah ini :

Oke jadi seperti itulah bagaimana cara untuk membuat sebuah titik pemisah untuk angka ribuan ataupun rupiah pada Javascript, semoga tutorial sederhana ini dapat bermanfaat dan sampai bertemu lagi di tutorial belajar Javascript selanjutnya.

Lebak Cyber Tips dan Trik Komputer

Format Rupiah di Javascript