Cara menggunakan format numerik javascript

Tutorial cara format rupiah dengan javascript menjadi form input nominal otomatis dipisahkan dengan titik pada masing-masing 3 digit terakhir. Artinya ketika kita mengetikkan angka nominal rupiah pada kolom input yang berjumlah lebih dari ribuan, jutaan atau milyaran, maka secara otomatis akan muncul titik di setiap 3 digit terakhir nominal inputan tersebut. Pembuatan format rupiah javascript secara otomatis sangat diperlukan untuk aplikasi keuangan yang membutuhkan pemisah unit tampilan. Lalu seperti apa bentuk format rupiah javascript? . Sebentar lagi kita akan membahasnya secara detail agar mudah dipahami

Table of Contents Show

Membuat Format Rupiah dengan Javascript
Tutorial Membuat Format Rupee dengan Javascript
Membuat Format Rupiah dengan Javascript

Tutorial cara format rupiah dengan javascript di kolom input dengan pemisah angka 3 digit lengkap dengan script ini kita lakukan di localhost menggunakan XAMPP ver 5. 6 disertakan dengan database MySQL. Untuk mengikuti tutorial ini pastikan komputer Anda sudah selesai menginstall web server XAMPP. Agar tutorial format rupiah javascript bisa diikuti dengan lancar

Berikut langkah-langkah cara memformat rupiah dengan javascript ke dalam kolom input nominal yang otomatis dipisahkan oleh titik

Membuat Format Rupiah dengan Javascript

format rupiah javascript

1. Membuat Folder Direktori Proyek

Folder directory ini bisa kita buat langsung di htdocs atau bebas dimana saja karena file projectnya tidak ada script php, misal nama foldernya "rupiah-javascript". Kegunaan folder ini adalah untuk menyimpan semua file yang akan kita buat untuk menjalankan tutorial membuat format rupiah dengan javascript

2. Membuat Form Input Format Rupiah Javascript

Seperti yang sudah dijelaskan bahwa format rupiah otomatis ini berjalan pada kolom input nominal angka yang akan dipisahkan dengan titik pada setiap 3 digit angka satuan. Sehingga hasilnya akan terlihat langsung saat kita mengetikkan nominal rupiah pada kolom input yang tersedia. Form input format rupiah ini akan kita buat sebagai homepage atau index, javascript untuk mengolah format rupiah juga akan dibuat di file ini

Ini kode javascriptnya, simpan sebagai index. html

<html>
<head>
	<title>Membuat Format Rupiah Dengan Javascript - Tutorial</title>
	<style type="text/css">
	body {
		font-family: sans-serif;
	}
	.kotak {
		width: 300px;
		padding: 5px;
	}
	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>
</head>
<body> 
	<h2>Membuat Format Rupiah dengan Javascript</h2>
	<h4>Form Input Nominal:</h4>
	<div class="kotak">
		Nominal: <input type="text" id="rupiah"/>
	</div>
	<script type="text/javascript">
		var rupiah = document.getElementById('rupiah');
		rupiah.addEventListener('keyup', function(e){
			// tambahkan 'Rp.' pada saat ketik nominal di form kolom input
			// gunakan fungsi formatRupiah() untuk mengubah nominal 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 satuan 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>

Kode untuk membuat format rupiah dengan javascript yang disematkan ke dalam html di atas jika dijalankan akan menampilkan form input numerik. Kemudian ketika diketik maka akan muncul format rupiah dengan titik pada setiap satuan ribuan, ratusan ribu, jutaan, milyaran dan seterusnya.

Jika dijalankan di web browser, maka akan muncul interface format rupiah javascript seperti gambar di bawah ini

Form Input Format Rupiah Javascript

Form isian format rupiah pada kolom terletak pada kode baris ke 29 s/d 31 yaitu pada kode html berikut

<div class="kotak">
	Nominal: <input type="text" id="rupiah"/>
</div>

Perhatikan bahwa atribut pada input tag diatas memiliki id="rupiah", hal ini perlu diperhatikan pada variabel pada kode javascript. Nama id harus sama dengan getElementById pada kode javascript yaitu pada bagian var rupiah = document. getElementById('rupee');

Untuk membuktikan tutorial cara format rupiah dengan javascript berhasil atau tidak silahkan ketik angka berapa saja sampai ribuan. Ini harus menampilkan format rupiah seperti yang ditunjukkan pada gambar di bawah ini

Format Rupiah Javascript Berhasil

Sampai disini tutorial cara membuat format rupiah dengan javascript sudah selesai dan berhasil dijalankan di web browser. Inti dari kode javascript yang merubah format angka menjadi format rupiah menggunakan fungsi terletak dari baris kode ke 33 sampai baris kode ke 55 yaitu pada bagian kode javascript berikut ini

var rupiah = document.getElementById('rupiah');
rupiah.addEventListener('keyup', function(e){
	// tambahkan 'Rp.' pada saat ketik nominal di form kolom input
	// gunakan fungsi formatRupiah() untuk mengubah nominal 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 satuan ribuan
	if(ribuan){
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
	}
 
	rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
	return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
}

Tutorial Membuat Format Rupee dengan Javascript

Berikut penjelasan dari kami tentang tutorial cara format rupiah dengan javascript menggunakan fungsi formatRupiah() lengkap dengan source codenya. Untuk mendapatkan source codenya bisa langsung di copy melalui source code yang ada di artikel diatas, jika ada kegagalan atau error atau tidak berjalan dengan baik silahkan hubungi kami melalui sms atau email atau melalui form komentar dan chat. Semoga membantu

Membuat Format Rupiah dengan Javascript

Tag. format rupiah dengan javascript, buat format rupiah javascript, buat format rupiah, format rupiah javascript, buat format rupiah dengan javascript