Membuat Format Rupiah pada Kolom Input

Pada saat ini kalian pasti pernah menemukan sebuah website yang memiliki fitur kolom input yang didalamnya terdapat fungsi otomatis dalam memberikan format angka khususnya mata uang. Dalam penulisan format mata uang ada terdapat kondisi peletakkan koma dan titik pada digit tertentu dan juga symbol atau karakter mata uang itu sendiri. Pada beberapa waktu lalu saya mencoba mencari cara untuk membuat fungsi tersebut yang diterapkan pada sebuah form inputan dengan bantuan javascript.
Fitur seperti ini juga bisa kalian gunakan pada project kalian agar menambahkan kesan modern dan realistis dalam penulisan format mata uang. Dalam membuat format mata uang rupiah kita akan memberikan sebuh struktur form seperti berikut.
       

<html>
<head>
    <title>Format Rupiah Dengan Javascript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body>
<div class="container">
    <h3>FORM</h3>
    <div>Tanpa Rupiah:</div>
    <input type="text" id="tanpa-rupiah"/>
    <div>Dengan Rp:</div>
    <input type="text" id="dengan-rupiah"/>
</div>
</body>
</html>

Selanjutnya kita akan  berikan CSS seperti berikut

body {
        font: 17px "open sans", "segoe ui", tahoma;
    }
    .container {
        width: 200px;
        margin: auto;
        margin-top: 15px;
    }
    input {
        padding: 5px 10px;
        font-size: 17px;
        border: 1px solid #CCCCCC;
        color: #5d5d5d;
        text-align: right;
        width: 200px;
        margin-bottom: 10px;
    }
    h3 {
        margin-bottom: 10px;
    }
    div {
        margin-bottom: 5px;
    }

 

Dengan struktur diatas kita sudah bisa melihat tampilan form dengan dua kolom inputan. Dimana inputan yang pertama tidak memiliki tulisan Rp pada awal format nominal, sedangkan yang kedua memiliki tulisan Rp pada awal format tulisan.
Berikut ini adalah beberapa baris kode untuk memberikan fungsi pada form yang telah kita buat.

 /* Tanpa Rupiah */
    var tanpa_rupiah = document.getElementById('tanpa-rupiah');
    tanpa_rupiah.addEventListener('keyup', function(e)
    {
        tanpa_rupiah.value = formatRupiah(this.value);
    });
    
    /* Dengan Rupiah */
    var dengan_rupiah = document.getElementById('dengan-rupiah');
    dengan_rupiah.addEventListener('keyup', function(e)
    {
        dengan_rupiah.value = formatRupiah(this.value, 'Rp. ');
    });
    
    /* Fungsi */
    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);
            
        if (ribuan) {
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }
        
        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
        return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
    }


Baiklah teman teman dengan fungsi diatas kita sudah mendapatkan dua buah form yang siap kalian gunakan pada website kalian. Demikian artikel tentang membuat format rupiah pada kolom input. Semoga bermanfaat

11 Desember 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat