membuat format rupiah dengan javascript

share

  • membuat format rupiah dengan javascript

    Membuat Format Rupiah dengan Javascript


    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 satuan ribuan, jutaan, milyar dan seterusnya.
  • membuat format rupiah dengan javascript
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat format rupiah dengan javascript
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat format rupiah dengan javascript Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat format rupiah dengan javascript
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Membuat Format Rupiah dengan Javascript

Pada kesempatan ini kita akan belajar tutorial tentang 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 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.

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 atau 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

membuat format rupiah dengan 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.

membuat format rupiah dengan javascript
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.

membuat format rupiah dengan javascript
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 :


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


Reliable

membuat format rupiah dengan javascript

Advertise

jasa pasang iklan murah

Payment & Donation

membuat format rupiah dengan javascript

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat format rupiah dengan javascript

Account :

andihatmoko@gmail.com

Live Chat

Bambang2021-07-29, 14:18 pm
Bisa di ganti namanya tidak ya mis Gudang backup arsip sat
Nirwan2021-07-29, 10:23 am
Program Aplikasi HRD Berbasis Web, berapa bos
Ghossani2021-07-23, 15:26 pm
Info harga Aplikasi Manajemen Anggota
Hanafi2021-07-22, 00:50 am
untuk website sekolah berapa
Bambang W 2021-06-30, 10:31 am
Untuk aplikasi stock barang, bisakah ada tambahan fitur multi gudang, dan kira kira berapakah harganya?
Warta2021-06-18, 00:24 am
Untuk biaya pembuatan aplikasi berbasis web untuk arsip berapa yah fee nya ?
ellll2021-06-15, 10:51 am
program aplikasi pembuatan ektp harganya berapaan ?
parlin2021-06-11, 14:42 pm
berapa harga dan bisa gk di ganti menu sesui dengan kebutuhan untuk aplikasi data pegawai
Retno2021-06-04, 15:13 pm
utk aplikasi arsip dokumen kantor, harganya brp ya pak?
NOFAL2021-06-02, 20:57 pm
hallo, untuk aplikasi penjualan retail brp harganya? ini sistem bisnisnya source code di ksh atau cloud?
Ezi Fitriana2021-05-26, 21:42 pm
mohon info biaya buat aplikasi sistem informasi dan pelayanan online buat Kantor Desa
arif2021-05-26, 04:33 am
Gan aplikasi hrd harga brp?
Sayuti2021-05-25, 15:06 pm
Mau tanya klo Biaya buat Aplikasi Penilaian Kinerja Atau SKP brp ya?
Farah Ghaida2021-05-20, 15:13 pm
maaf pa sy mau tanya biaya pembuatan aplikasi data kepegawaian
Rachma2021-05-08, 19:26 pm
Untuk program aplikasi arsip dokumen biayanya berapa ya? dan apakah ada pembatasan maksimal berapa kb per dokumen?
Donald Amrul2021-05-04, 09:53 am
Mas username member saya apa ya lupa saya coba cek mas
yudhi2021-05-02, 22:26 pm
aplikasi peta hukum tidak bisa demo
zainuddin2021-05-02, 08:07 am
mohon informasi harga cuti online
zulkifli2021-04-25, 22:45 pm
brapa harganya aplikasi data ke anggotaan sederhana yang bisa lampirkan foto dan di print
iyus Mohamad2021-04-23, 13:04 pm
untuk pembuatan program aplikasi arsip dokumen perkiraan biayanya berapa ya?
irvan2021-04-14, 11:00 am
saya ingin membeIi untuk instansi pemerintah saya, bagaimana pembeIiannya ya
Nourma Berdh2021-04-08, 14:28 pm
untuk pembuatan program aplikasi arsip dokumen perkiraan biayanya berapa ya?
Sahlani2021-03-25, 19:33 pm
Saya mau pesan absensi karyawan berbasis web yang sederhana_
Shany2021-03-19, 08:59 am
saya ingin coba demo yang aplikasi inventory berbasis web, harganya berapa ya
Din2021-03-17, 12:24 pm
Mas mau tanya, kalo mau bikin script berikut penjelasannya berapa ya ? biar mengerti kalau mau edit edit
fahmi2021-03-16, 02:16 am
Berapa ya harga aplikasi perjalanan dinas ini?
dela2021-03-10, 10:23 am
ka untuk pembelian aplikasi manajemen anggota berapa budgetnya? dan mendapatkan source codenya tidak ya?
Irwan TB2021-03-04, 08:43 am
Saya Minat dgn aplikasi server _ Sofware input data siswa_ Bagaimana caranya
Reza2021-03-03, 16:42 pm
Mas saya ingin ngambil data dari database, terus data itu dikalkulasi dibutton html saya dan muncul alert hasilnya?
isna2021-02-26, 23:59 pm
saya minat Aplikasi pengajuan judul skripsi online bang_
Jagad2021-01-22, 20:44 pm
Aplikasi nya mantap gan, yang arsip digital_ source code sangat terstruktur dan berkarakter, jadi mudah dipelajari_ Thx
regista2021-01-20, 10:45 am
Hallo kak info saya ingin download aplikasi rental barang kak

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat format rupiah dengan javascript