Cara menggunakan input harga html

Tutorial cara membuat format rupiah dengan javascript ke dalam form input nominal secara otomatis yang dipisahkan oleh tanda titik pada tiap 3 digit angka terakhir. Maksudnya adalah ketika kita ketik angka nominal rupiah di kolom input yang berjumlah lebih dari ribuan, jutaan atau milyaran, maka otomatis akan tampil tanda titik di tiap 3 digit terakhir nominal input tersebut. Membuat format rupiah javascript secara otomatis ini sangat dibutuhkan pada aplikasi keuangan yang mengaharuskan menampilkan pemisah satuan. Kemudian bagaimana bentuk format rupiah javascript tersebut? dan seperti apa kode javascript untuk membuat format rupiah otomatis ini. Sesaat lagi kita akan sama-sama membahasnya secara rinci dan detail sehingga mudah dipahami.

Table of Contents Show

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

Tutorial cara membuat format rupiah dengan javascript pada kolom input dengan pemisah 3 digit angka lengkap dengan script ini kami lakukan pada localhost menggunakan XAMPP ver 5.6 include dengan database MySQL. Untuk mengikuti tutorial ini pastikan komputer anda telah completed install web server XAMPP tersebut. Sehingga tutorial format rupiah javascript dapat diikuti dengan lancar.

Berikut langkah - langkah cara membuat format rupiah dengan javascript ke dalam kolom input nominal yang secara otomatis akan dipisahkan oleh tanda titik:

Membuat Format Rupiah dengan Javascript

format rupiah javascript

1. Membuat Folder Direktori Project.

Folder direktori ini dapat kita buat langsung di htdocs atau bebas di mana saja karena file project bukan dalam script php, sebagai contoh nama folder nya adalah "rupiah-javascript". Kegunaan folder ini adalah untuk menyimpan seluruh file yang akan kita buat untuk menjalankan tutorial membuat format rupiah dengan javascript.

2. Membuat Form Input Format Rupiah Javascript

Sebagaimana telah dijelaskan bahwa format rupiah otomatis ini berjalan pada kolom input nominal angka yang akan dipisahkan oleh tanda titik pada setiap 3 digit angka satuan. Sehingga hasilnya akan terlihat langsung saat kita mengetik nominal rupiah nya pada kolom input yang tersedia. Form input format rupiah ini kita buat sebagai homepage atau index, javascript untuk memproses format rupiah juga akan kita buat pada file ini.

Berikut adalah kode javascript nya, 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 di embed ke dalam html di atas jika dijalankan akan menampilkan form input angka. Kemudian ketika diketik akan menampilkan format rupiah dengan tanda titik pada tiap satuan ribuan, ratusan ribu, jutaan, milyaran dan seterusnya.

Jika dijalankan pada web browser akan menampilkan interface format rupiah javascript seperti gambar di bawah ini.

Form Input Format Rupiah Javascript

Form input format rupiah dalam kolom tersebut terletak pada baris kode ke-29 hingga ke-31, yaitu pada kode html berikut ini.

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

Perhatikan atribut-atribut pada tag input di atas terdapat id="rupiah", hal ini harus diperhatikan pada variable di kode javascript. Nama id harus sama dengan getElementById di kode javascript yaitu pada bagian var rupiah = document.getElementById('rupiah');.

Untuk membuktikan tutorial cara membuat format rupiah dengan javascript berhasil atau tidak, silahkan ketik angka berapapun hingga melebihi satuan ribuan. Seharusnya menampilkan format rupiah sebagaimana gambar di bawah ini.

Format Rupiah Javascript Berhasil

Sampai pada tahap ini tutorial cara membuat format rupiah dengan javascript telah selesai dan berhasil di jalankan pada web browser. Inti dari kode javascript yang merubah format angka menjadi format rupiah menggunakan function terletak mulai pada baris kode ke-33 hingga 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 Rupiah dengan Javascript

Sekian penjelasan dari kami tentang tutorial bagaimana cara membuat format rupiah dengan javascript menggunakan function formatRupiah() lengkap dengan source code nya. Untuk mendapatkan source code nya Anda dapat langsung copas melalui sumber kode pada artikel di atas, jika terjadi gagal atau error atau tidak berjalan baik mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :

Script PHP Export To Excel
Script PHP Update Database MySQL | CRUD
Script Tampil Database dengan PHP MySQL | VIEW Data
Cara Membuat Laporan PDF dengan PHP dan MySQL
Cara Membuat Script Login Multiuser dengan PHP dan MySQL
Membuat form login dan logout dengan PHP dan MySQL
Membuat Form dan Script Edit Data dengan PHP MySQL

Membuat Format Rupiah dengan Javascript

Tags: format rupiah dengan javascript, membuat format rupiah javascript, membuat format rupiah, format rupiah javascript, membuat format rupiah dengan javascript