Cara Membuat Format Rupiah Dengan Javascript

Yang sudah kita ketahui javascript sangat berperan penting dalam hal dinamisasi website. Oleh karena itu dalam kasus ini kita akan membuat fitur dimana kita saat mau menginput nilai dengan format rp bisa otomasti terformat dalam bentuk uang rupiah dengan contoh: Rp. 100.000.

Fitur ini sangat berguna bagi user experience untuk menginfut nilai rupiah. Apalagi kalau fitur ini bisa di terapkan di website management seperti website bendahara, kasir dan lain-lain.

Tidak usah panjang lebar mari kita langsung ke tutorialnya.

Membuat Format Rupiah Dengan Javascript.

Langsung saja kita buat form untuk fitur format rupiah kali ini.

Siapkan folder dan file htmlnya saya pribadi menamainya format_rupiah/index.html , kalau kalian mau berbeda silahkan teserah kalian sekreatif kalian saja.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>www.matrikulasi.com</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>

	<div class="kotak">
           <p>Ketik jumlah nominal pada form di bawah ini.</p>
               <span>Nominal Rupiah. :</span>
            <input type="text" id="rupiah" />
        </div>


	<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.valuem "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>

Sebelum kita test hasilnya, saya akan menjelaskan bagian-bagian code di atas.

Pertama kerangkanya atau dalam htmlnya.

Nah di bagian html kita buat formnya untuk menginput Nilainya

<div class="kotak">
  <p>Ketik jumlah nominal pada form di bawah ini.</p>
  <span>Nominal Rupiah. :</span>
  <input type="text" id="rupiah" />
</div>

Selanjutnya kita beralih ke bagian cssnya biar tampilanya bagus dan estetik

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;
}

Terakhir kita ke bagian aktornya yaitu Javascript yang memberi fitur formaternya.

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 : "";
}

Nah bila kode sudah lengkap dan benar kita bisa test.

See the Pen Untitled by Yusup Supriyadi (@yusupsupriyadi) on CodePen.

Mudah sekali bukan. dalam hal ini kita bisa costumisasi banyak hal sesuai kebutuhan kamu. selamat mencoba😊