NEW!! » Premium Support - PHP, MySQL, Dll Buku Query MySQL Lihat Detail » x

Format Rupiah Dengan Javascript – Singkat dan Mudah

Pada kesempatan kali ini kita akan membahas bagaimana cara mem format rupiah dengan javascript.

Untuk memformat output data database ke dalam bentuk rupiah, kita gunakan program serverside, seperti PHP. Hal ini tidak efektif jika menggunakan program client side seperti javascript, karena harus menunggu semua dokumen di load.

Lalu, untuk tujuan apa membuat format rupiah dengan javascript?

Umumnya, format rupiah dengan javascript ini digunakan untuk mengelola inputan dari user pada form baik secara langsung maupun tidak langsung. Tidak langsung dalam hal ini misal membuat total dari semua inputan secara realtime.

I. Membuat Format Rupiah Dengan Javascript – Cara Mudah

Diinternet terdapat banyak script untuk membuat format rupiah dengan javascript. Kali ini saya menggunakan cara berbeda yaitu menggunakan regex, yang lebih simpel dan mudah dipelajari.

Adapun script jadinya adalah sebagai berikut:

var bilangan = 23456789;
	
var	number_string = bilangan.toString(),
	sisa 	= number_string.length % 3,
	rupiah 	= number_string.substr(0, sisa),
	ribuan 	= number_string.substr(sisa).match(/\d{3}/g);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}

// Cetak hasil
document.write(rupiah); // Hasil: 23.456.789

Script diatas akan menghasilkan angka 23.456.789.

Penjelasan:

  • Pertama, karena kita akan memecah angka menggunakan fungsi untuk string, maka  kita ubah format angka menjadi string dengan fungsi toString bilangan.toString()
  • Selanjutnya kita cek apakah jumlah digit bukan kelipatan 3 (number_string.length % 3), hasilnya kita simpan pada variabel rupiah.

    Nilai variabel rupiah ini ada nilainya jika banyaknya angka tidak kelipatan 3, dan akan bernilai kosong jika banyaknya angka kelipatan 3. Pada contoh kali ini, nilai awal rupiah adalah 23.

  • Selanjutnya, dengan regex yang simpel, kita kelompokkan sisanya per tiga digit, sisa ini berbentuk array dan disimpan ke dalam variabel ribuan. Dalam contoh ini, variabel ribuan akan berisi ["444"]["555"]
  • Jika variabel ribuan ada nilainya: Jika jumlah digit tidak kelipatan 3 (variabel sisa ada isinya) maka separator bernilai titik (.), jika tidak, maka separator bernilai kosong.

    Hal ini untuk menghindari titik didepan angka jika jumlah angkan kelipatan 3, seperti: .125.000

  • Terakhir, dengan operator += kita gabung nilai varibel rupiah.

Untuk lebih jelasnya, perhatikan gambar berikut:

Format Rupiah Dengan Javascript - Cara Mudah

DEMO: untuk demonya, silakan klik disini.

Cara lebih singkat

Sebenarnya ada cara lebih singkat lagi, yaitu:

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

Penjelasan:

  • Pertama, kita ubah bilangan menjadi string ( bilangan.toString() ), kemudian kita balik urutan angka tersebut ( split('').reverse().join('') ), hasilnya 98765432 kita simpan pada variabel reverse
  • Selanjutnya, dengan regex, kita pecah angka tersebut per tiga bagian menjadi array: ["987","654","32"].

    Regex \d{1,3}: artinya kita ambil angka ( \d dapat diganti [0-9] ) dengan panjang digit 1-3, diambil yang terbanyak dahulu yaitu 3, artinya jika bisa menemukan tiga karakter, maka diambil 3 karakter, jika tidak 2, jika tidak 1.

  • Kemudian kita gabung array tersebut dengan titik ( ribuan.join('.') ), hasil: 987.654.32, dan kita balik hasilnya ( split('').reverse().join('') ), hasilnya: 23.456.789

Untuk lebih jelasnya, perhatikan gambar berikut:

Format Rupiah Dengan Javascript - Cara Singkat

DEMO: Untuk demo penggunaan script ini, dapat dilihat disini.

Karena cara kedua ini banyak menggunakan fungsi array yaitu split, reverse, dan join, maka waktu eksekusi script ini 3x lebih lambat daripada cara pertama, sehingga pada pembahasan selanjutnya, kita akan menggunakan cara pertama. Namun demikian, sobat bebas memilih cara yang ingin digunakan

II. Mendukung Koma (Desimal)

Pada rupiah, kita mengenal istilah desimal atau sen, meski jarang digunakan, pada sistem yang detail, penggunaan koma ini masih sering digunakan.

Untuk itu, mari kita sedikit ubah script kita, sehingga dapat mendukung koma/sen

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

Script diatas tetap kompatibel baik untuk bilangan bulat maupun bilangan yang memiliki pecahan/sen. Adapun perbedaan dari script sebelumnya hanya di baris 4 dan 13.

Penjelasan:

  • Pada baris 4, dengan method split, kita pecah bilangan menjadi dua berdasarkan tanda koma, yaitu bilangan utuh (sebelum koma) dan bilangan pecahan (sesudah koma), hasilnya kita simpan pada variabel split.
  • Selanjutnya, untuk bilangan bulat, kita gunakan split[0], sedangkan untuk pecahan, kita gunakan split[1]
  • Pada baris ke 13, kita tes, apakah bilangan mengandung pecahan ( split[1] != undefined ) jika, ya, maka kita gabungkan pecahan dengan bilangan jadi.

III. Menerapkan Format Rupiah Pada Form

Format rupiah dengan javascript paling sering digunakan pada inputan form yang terkait dengan nilai nominal misal harga, jumlah diskon, total harga, dan lain-lain.

Nah, script untuk menerapkan format rupiah pada form input ini, sama seperti script yang telah kita bahas sebelumnya, bedanya, kita menggunakan event keyup dan keydown

keyup artinya event yang terjadi ketika tombol keyboard kita lepas (setelah kita tekan) sedangkan keydown artinya event yang terjadi ketika kita menekan tombol pada keyboard.

1. Event Keyup

Untuk menangkap event keyup, kita menggunakan method addEventListener. Method ini sudah didukung oleh semua browser modern, namun khusus untuk IE, baru mendukungnya versi 9 ketas.

Adapun script yang kita gunakan:

var input = document.getElementById('input-rupiah');
input.addEventListener('keyup', function(e)
{
	var 	number_string = bilangan.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{1,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 : '');
});

Script diatas sama persis dengan script sebelumnya, hanya saja, ada beberapa yang kita tambahkan:

  • Pada fungsi diatas kita menambahkan kode bilangan.replace(/[^,\d]/g, '') yang digunakan untuk menghilangkan semua karakter selain koma dan bilangan ( [^,\d] ). Sehingga, ketika user menekan huruf selain koma dan digit, maka akan langsung hilang.
  • Kedua, kita menambahkan kode prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : ''); untuk menambahkan prefix (dalam contoh ini Rp.) jika user menghendaki adanya prefix.

DEMO: Untuk demonya, silakan klik disini.

2. Penambahan Event Keydown

Ketika menggunakan event keyup, maka ketika user menekan huruf a pada keyboard, maka teks a tersebut akan muncul, namun ketika user melepas tombol a tad, maka seketika huruf a tersebut akan hilang.

Nah, event keydown ini dapat membatasi sehingga tombol a benar-benar tidak berfungsi alias ketika user menekan tombol a, maka tidak terjadi apa-apa.

Keterbatasan dari metode ini adalah kita harus menentukan huruf mana saja yang akan kita disable, untuk itu kita harus mengetahui keycode dari masing masing huruf. Keycode tersebut dapat dilihat disini.

Fungsi yang kita gunakan adalah:

var input = document.getElementById('input-rupiah');
input.addEventListener('keydown', function(event) {
{
	key = event.which || event.keyCode;
	if ( 	key != 188 // Comma
		 && key != 8 // Backspace
		 && key != 17 && key != 86 & key != 67 // Ctrl c, ctrl v
		 && (key < 48 || key > 57) // Non digit
		 // Dan masih banyak lagi seperti tombol del, panah kiri dan kanan, tombol tab, dll
		) 
	{
		event.preventDefault();
		return;
	}
});

DEMO: Untuk demonya, silakan klik disini.

Teknik yang pertama (keyup) yang paling umum digunakan untuk membatasi inputan karakter pada form, karena masih ada reaksi ketika user menekan tombol keyboard.

Dengan demikian user tahu bahwa ada pembatasan inputan karakter. Jika menggunakan metode keydown, karena tidak ada reaksi ketika keyboard ditekan, mungkin user akan menduga apakah keyboardnya yang bermasalah?

IV. Kesimpulan

Membuat format rupiah dengan javascript dapat dilakukan dengan banyak cara, beberapa diantaranya telah kita bahas diatas.

Mana yang seharusnya kita gunakan?

Berdasarkan pembahasan kita diatas, yang paling umum digunakan adalah menggunakan event keyup (bagian III.1) untuk lebih meningkatkan fungsionalitas, kita dapat menambahkan event keydown (bagian III.2)

Demikian pembahasan mengenai cara format rupiah dengan javascript, semoga bermanfaat.

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

93 Feedback dari pembaca

  • Mas, gimana ya kalau mengolah inputan dengan format currency. Contohperkalian, inputannya textbox1 (10.000) x textbox2(2.000).
    Pas ngolah dengan javascriptnya ngga bisa karena ata “.”, cara replace “.” gimana? Mohon bimbingannya…

    • Coba ini mas:

      <script type="text/javascript">
      var nilai1 = '10.000.000',
      	nilai2 = '500.000';
      
      // Hilangkan karakter selain digit (gunakan regex \D)
      var num1 = nilai1.replace(/\D/g, ''),
      	num2 = nilai2.replace(/\D/g, '');
      
      // gunakan parseInt() untuk mengubah string menjadi integer, sehingga bisa dilakukan operasi bilangan
      document.write(parseInt(num1, 10) + parseInt(num2, 10));
      </script>

      untuk penerapannya pada form:
      nilai1 = textbox1.value;
      nilai2 = textbox2.value;

      • Asslamu’alaikum, Mas maaf mau nanyak yg script untuk mengolah penjumlahan atau perkalian itu dtaruh bagian mana yaa? kok saya coba berkali-kali tdk bisa, maaf masih belajar tahap awal, terimakasih Mas..

    • Tanda / sampai dengan / menandakan didalamya merupakan RegEx mas
      Karakter khusus d untuk mencari data digit, sedangkan D untuk non digit
      Untuk menggunakan karakter khusus, gunakan escape ( \ ), jika tidak, maka akan dibaca karakter biasa, misal:

      var teks = '1234aD';
      console.log( teks.match(/D/) ); // Mencari karakter D, hasil D
      console.log( teks.match('/\D/') ); // Mencari karakter selain digit, hasil aD

      Karakter khusus g artinya global, RegEx akan mencocokkan semua karakter degan RegEx, jika tanpa g, maka ketika ketemu karakter pertama regex berhenti,

      var teks = '1234aDdD';
      console.log( teks.match(/\D/) ); // Mencari karakter selain digit, hasil a
      console.log( teks.match(/\D/g) ); // Mencari karakter selain digit, global, hasil aDdD
  • Mas, mau nanya:
    Bagaimana caranya agar tanda koma (,) dapat dikonversi ke titik dan ditangkap oleh variable php?
    Alur dalam contoh diatas:
    1. Input angka pada JavaScript ( misalnya : 1.000.000,55).
    2. Hapus format uang Dgn code php $clean, kemudian konversi tanda koma menjadi tanda titik.
    Sehingga yg ditangkap oleh php dan hasil dr $clean bisa menjadi 1000000.55.
    3. Nilai ini yg akan di echo/di insert ke data base.
    Makasi atas tanggapannya, Mas

    • Di script PHP nya, fieldnya ditangkap mas, terus direplace komanya, misal:

      <form method="POST" action="">
      <input type="text" name="rupiah">
      <input type="submit">
      </form>
      <?php
      if (@$_POST['submit']) {
      	$rupiah = str_replace('.','',$_POST['rupiah']); // menghilangkan titik
      	$rupiah = str_replace(',','.',$rupiah); // mengganti koma dengan titik
      	// Masukkan data ke database
      }

      selanjutnya nilai tersebut tinggal dimasukkan ke database:

  • tapi gimana mas kalo di inputkan ke database biar bisa soalnya saya inputkan ke database yang masuk ke database 3 digit sebelum titik sesudah titiknya gak kebaca??

    • Itu tipe data kolom di databasenya mas, di belakang titik akan dibaca desimal, jika tipe data kolom tersebut integer, seperti INT, maka desimalnya akan hilang

      Jika maksudnya dibelakang titik adalah ribuan, maka hilangkan titinya terlebih dahulu sebelum dimasukkan kedalam database, contoh scriptnya ada di jawaban saya sebelumnya

  • Hanya koreksi sedikit mas… Pada bagian II itu seharusnya returning data dari variabel rupiah, bukan variabel ribuan.

    document.write(rupiah);

  • Halo mas,
    Mohon bantuannya untuk replacement string berupa angka menjadi teks dengan javascript/jquery.

    Ini contoh elemen htmlnya: https://paste.ubuntu.com/26340512/
    Angka 1, 2, 3, 4, dst (sampai 28) itu adalah hasil generate script pagination.

    Bagaimana mengubah angka tersebut menjadi teks:
    Khusus untuk “1” menjadi “#”
    Kemudian “2” menjadi “A”, “3” menjadi “B”, “4” menjadi “C” dst…

    Saya sudah coba dengan

    $(window).load(function(){ 
           onPageClick: function (event, page) {
             $('a.page-link:contains(1)').text("#");
             $('a.page-link:contains(2)').text("A");
             .....
           }
    });
    

    Memang sih berhasil, hanya saja kendalanya ketika sudah sampai di “10” hasil replacementnya adalah “#”. Karena mungkin contains() tidak mebedakan secara exact match antara string “1” dengan string lain yang juga mengandung “1” (misal 10, 11, 12 …)

    • Jika dengan aacuan windows, searching DOM nya terlalu banyak mas, dibatasi di parentnya pagination saja yaitu di <UL> nya, selanjutnya dari <UL> search element <a> nya….

      Nah setelah di loop <a> nya, ambil teks dengan text(), kemudian replace dengan text() lagi…

  • assalamualaikum bos ku terima kasih atas tutornya.
    saya mau konsul ni bosku,
    disini saya coba menggunakan format rupiah misal : Rp. 1.000.000 tapi saya mau simpan ke database dengan number yang di inputkan saja. gimana ya caranya hapus tanda Rp dan titik untuk simpan ke database ya bosku. mohon bantuannya ya makasih…….

    • Maksudnya di javascript nya mas? jika ya, tinggal di tambahkan di event key up, di split komanya, hilangkan koma yang melebihi batas, kemudian hasilnya di masukkan kembali ke input field

  • Om, kalau dari tabel yang sdh terdapat rumus sebelumnya, kemudian angkanya ingin menggunakan pemisah ribuan bisa nggak..?

  • permisi mas kalo misalnya :
    # user input di form “10.000”, “1.000.000”,”, “1.000.000.000” bisa tidak di ubah menjadi “10 ribu”, “100 ribu”, “1 Juta”, “1 milyar”
    mohon pencerahan nya mas, terima kasih semoga sukses selalu

  • 1. Input bilangan ngacak
    2. Di konversi jadi kayak gini :
    Ratusan Ribu ada ….
    Puluhan ribu ada ….

    Kayak gitu sampe satuan

    kalo untuk pecahan uang menggunakan javascript gimana gan

  • Terima kasih sangat membantu postingannya
    saya juga struggle dengan masalah ini apalagi dibagian detect key code nya utk event listener keydown. akhirnya saya hard coding semua keycode yg gak bisa ditulis :D, mungkin berguna juga untuk kawan2, jdi saya bagikan disini jga ya. kalau dirasa caranya ampuh boleh jga dimasukkan kedalam postingannya supaya jadi referensi kedepan

    var notAllowedKey = [192, 81, 87, 69, 82, 84, 89, 85, 73, 79, 80, 219, 221, 220, 65, 83, 68, 70, 71, 72, 74, 75, 76, 186, 222, 90, 88, 67, 86, 66, 78, 77,190, 191, 189, 187, 106, 107, 108, 109, 111];
    
    function limitCharacter(event)
    {
      key = event.which || event.keyCode;
      if ($.inArray(key, notAllowedKey) &gt; -1) {
        event.preventDefault();
        return false;
      }  
    }

    oia, btw, saya pakai jquery, jika mau diubah ke vanilla JavaScript silahkan!

  • Bagaimana kalau mau format inputan nya otomatis titik diganti dengan koma, lalu saat user input titik sebagai ganti koma dibatasi 2 digit saja mas ?
    Terima kasih atas bantuannya

  • Assalamualaikum, pak saya mau tanya kalau di input data Qty * harga Barang
    input 40*40.000 = 1.600.000
    tetapi di input total hanya tampil 1600 tanpa ada titik dan titik dibelakang juga .000 itu seperti apa ya pak?

    • Waalaykumsalam Wr. Wb.
      Bisa menggunakan fungsi str_replace pada PHP kemudian hilangkan 3 digit terakhirnya, misal:

      $total = '1.600.000';
      $total = str_replace('.','',$total);
      $total = substr($total, 0, strlen($total) - 3);
  • mas, itu khan hasil akhirnya Rp. 123.456 ; bagaimana kalau kita ingin hasil akhirnya Rp. 123.456,00 ?
    maklum mas pemula, saya sudah coba tambahin di return prefix, tapi hasil akhirnya yg benar, kalau ada koreksi, bisa jadi kacau

  • mas untuk memasukan hasilnya kedatabase klo versi php kan pakai str_replace , klo codeigniter gimana mas?

  • terimakasih pak sangat membantu sekali. mau tanya, misal kolom input an nya lebih dari satu gimana ya pak? saya udah coba tapi ternyata hanya kolom input pertama yang bisa. sementara kolom input dibawahnya tidak bisa. mohon bantuannya pak. berikut script saya :

    https://pastebin.com/bJ4aEJPN

  • assalamualaikum,,,,,sangat membantu mas,,cuma saya masih bingung otak atik belum ketemu ,mau tanya kalau ditabel saya cuma ada 1 input saja yang diketik,, ,misal input di box1 ,, box2=box1 * 0.8 ,,box3=box1*box2*3,14 ,,, box4=box3*75000 nah pada box4 saya pinginya munculnya langsung dalam bentuk rupiah misal Rp. 2.800.000,00 itu caranya gimana mas,,,, disini contohnya mas,,, http://www.kubahmoderen.com/ dan sampai comen ini saya tulis masih belum berhasil saya

  • bagaimana jika valuenya itu nominal biasa dirumh menjadi desimal gan?
    contoh dari angka 1505235 jadi 15.052,35???

  • Mohon bantuannya pak, bagaimana script menjumlahkan dengan javascript dengan format bilangan seperti contoh berikut ini: 5.700,25 + 5.300,85 = 11.001,10. Saya sudah mencoba tapi hasilnya tidak sesuai yang diharapkan, kesulitan regex untuk mereplace koma lalu nanti hasilnya nanti setelah dijumlahkn kembali ke format ribuan dengan tanda desimal koma. Terima kasih

  • maaf gan, #oot, saya baru mempelajari php, saya bingung, apa ada cara untuk “menghilangkan” angka di belakang koma, tanpa mempengaruhi angka di depan koma, misal :
    43,9 jadi 43
    1,5 jadi 1
    12,9 jadi 12
    7,5 jadi 7
    0,4 jadi 0
    0,6 jadi 0

    tanpa mempengaruhi angka di depan’nya gan, apa ada rumus’nya???

  • mas kalo nilai inputnya ada koma contoh 5.400.000,90 pas di simpan kalo menggunakan preg_replace(‘/\D/’,”,$_POST[‘Pagu_Anggaran’]); menjadi 540.000.090 mohon pencerahan

  • pas di simpan ke database bang nilai input datanya. contoh 5.400.000,90 menjadi 540.000.090 kalo menggunakan preg_replace(‘/\D/’,”,$_POST[‘Pagu_Anggaran’]); .
    tidak bisa menterjemahkan 2 digit di belakang koma

  • kalo var nya ndak dituils, misalnya :
    var angka = 12232 ; angkanya itu diambil dari angka yan tertulis di itu gimana ya mas ?

  • kalo mau manggil fungsi tersebut dalam beberapa form gimana mas, misal di form manggil id=”rupiah”. untuk form selanjutnya kan ga bisa d pakek mas, mohon solusinya. apa harus buat file.js sendiri ato ada cara lain yg llebih singkat?

    • Memang kalau menggunakan ID hanya bisa satu saja mas, sebagai solusinya bisa menggunakan class, jquerynya:

      $('.format-rupiah').each(function(i, elm) {
      	var nilai = $(elm).val();
      	// code lainnya
      })
  • Mas saya mau nanya dong, kan kalau bikin Cetak laporan gitu kan saya d bawahnya ada kolom untuk menjumlahkan semua data bayar yg ada d table dan d total d table jumlah d bawahnya ya, nah untuk yg RIBUAN RUPIAH di data bayar yg d table saya bisa menggunakan, untuk yg total kan itu jumlahnya menggukaan variable untuk memanggil name dari data bayar ya, nah, untuk yg variable itu jika ingin dijadikan ribuan rupiah gmn ya ? kan klo bukan variable scriptnya seperti ini “.rupiah($d[‘jumlah’]).”, dan yg total $total += $d[‘jumlah’];, itu yg total bagaimana ya jika ingin d jadikan ribuan rupiah jika menggunakan $total ?? terima kasih

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Jasa Konsultasi PHP MySQL Website Dengan Ahlinya

Like Us