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

softwareoriginal

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

Lodowik Djan2020-10-20, 21:20 pm
Berapa harga aplikasi SIMPEG
iwan2020-10-18, 21:41 pm
harga progamnya berapa ya
yopi2020-10-16, 12:02 pm
gimana cara download aplikasi ini
akhmad ramad2020-10-07, 02:50 am
Apakah bisa membuat Aplikasi Deteksi Tingkat Kemiripan Judul Berbasis Web Metode Winnwoing_ ??
imadebudiyas2020-10-06, 10:21 am
untuk aplikasi sipas berapa harganya
sarpas2020-09-28, 14:37 pm
berapa harga untuk aplikasi arsip kantor v4?
Lukman2020-09-22, 11:53 am
Mau Tanya Harga Program Aplikasi Inventory Barang Gudang brapa_ ?
Agustina Ndj2020-09-18, 09:51 am
download aplikasi sarpras sekolah
Aloisius Rab2020-09-17, 22:15 pm
Aplikasi Pengajuan Kredit dan Analisa 5C
CARLITO DA S2020-09-16, 12:52 pm
Halo, Saya Carlito da Silva Berapa harga dari aplikasi stok barang berbasis web?
data2020-09-13, 10:50 am
tolong bisa bantu program aplikasi barang
sutan arif p2020-09-09, 10:13 am
berapa harga source code program pengarsipan?
kumbaray2020-09-09, 02:46 am
untuk aplikasi spj_ sppd nya berapa kisarannya gan
Yance Rawar2020-09-01, 17:10 pm
Boleh saya bertanya ya?_ berapa biaya aplikasi LPJ Dana Desa_ Mohon tanggapannya ya?
ZAI2020-08-30, 06:18 am
brp harga aplikasi input data karyawan
ADE IRHAM2020-08-29, 18:53 pm
Raja SARPRAS V4_ 0 _ Demo Aplikasi harganya berapa?
Juned2020-08-23, 11:30 am
Gimana kalo make delete di mysqli nya??
putri2020-08-21, 08:51 am
Saya tertarik dengan aplikasi arsipnya_ HArganya berapa ya gan? Terima kasih
Mukhlis2020-08-18, 10:42 am
Aplikasi Indekx Kepuasan Masyarakat nya ada bg?
Tedi2020-08-15, 20:41 pm
Selamat malam para pakar
arif2020-08-13, 14:36 pm
Program Aplikasi Rental Online Untuk Halaman Member Depannya tidak ada hanya Halaman Login Untuk admin dan Super admin
secret2020-08-10, 14:59 pm
ada free source code yang bgagus gak ?
Angela2020-08-06, 18:50 pm
Hallo, saya angela ingin bertanya apakah aplikasi surat berbasis web ini bisa disesuaikan dengan keadaan di kita_ _ _ hrg?
aan2020-08-05, 14:20 pm
kl mau mendapatkan sourcecode aplikasi SPPD gimana ya?? bisa minta wa nya
SHODIKIN2020-07-26, 06:16 am
Berapa Donasi Program Aplikasi Penjualan Berbasis Web? Tq
MICHAEL ELSO2020-07-23, 18:34 pm
Apakah pembelian aplikasi ktp sudah termasuk datanya smua? Atau hanya aplikasinya saja? Misalnya mau untuk cek data bs?
April2020-07-21, 13:54 pm
saya ingin membuat aplikasi arsip digital untuk internal perusahaan yg dengan mudah dapat di akses bagi seluruh karyawan
Salwa2020-07-20, 13:07 pm
Berapa lama kira2 pesan aplikasi untuk perpustakaan sekolah?
udin2020-07-19, 21:44 pm
berapa harga aplikasi untuk pondok pesantren
Royke Lantup2020-07-17, 20:07 pm
Setelah di download langkah_ langkahnya seperti apa?
Feria2020-07-10, 16:50 pm
Untuk aplikasi penyimpanan berkas pengajuan administrasi capil, KK dan KTP berapa biaya nya ??
nugraha2020-07-10, 09:46 am
gan, cara dapat aplikasi simpeg7 gimana?
kasmono2020-07-08, 15:09 pm
mas, minta link donlot untuk script kode otomatisnya_ trims
Asep Gunawan2020-07-08, 09:50 am
Mau tanya versi Full Aplikasi stok barang
Iwan2020-07-08, 09:40 am
Berapa harga Program Aplikasi Manajemen Anggota
ferry 2020-06-24, 13:51 pm
apakah saya bisa mendapatkan aplikasi SPPD exel sederhana
Shany2020-06-19, 20:43 pm
Untuk aplikasi persediaan ini apakah masih bisa di customize dengan warna dan ukuran?
fadhil2020-06-17, 09:53 am
bisakan anda mengirimkan penawaran ke email saya tentang program aplikasi e_ arsip dan data pegawai
aa2020-06-08, 11:11 am
brp harga untuk aplikasi Program Aplikasi Inventory Barang Gudang
Budhi Dwipa2020-06-08, 10:48 am
halo admin saya tertarik dengan aplikasi simpeg 7 apakah ada nomor wa yg bisa dihubungi ?
abu hafidz2020-06-04, 14:23 pm
kalau untuk menampilkan hanya data yang ada di table lain gimana ya ? mohon bantuannya
Muhlis2020-06-04, 12:09 pm
saya berminat software pengajuan judul skripsi, saya ingin membahas harganya jida chat ini di respon ke Email
nic2020-06-04, 07:49 am
brp harga e_ arsip
NUR CAHYANIG2020-06-03, 15:20 pm
Berapa harga untuk software koperasi?
Arif Mahmudi2020-06-03, 11:00 am
Assalamualaikum
mugiarto2020-05-09, 08:33 am
bgmana cara beli program iin, apakah termasuk souce code nya ??
willbertus2020-04-28, 16:49 pm
Admin mohon info utk Aplikasi Dokumen Kantor gimana cara dapatnya secara komplit_ Minat_ thks
Galih2020-04-27, 23:18 pm
Min, bagaimana cara mendapatkan source code aplikasi cuti?
Aris2020-04-12, 08:45 am
plikasi Arsip Surat Berbasis Web SIPAS harganya brp?dpt source code y
Wida Widiyaw2020-04-11, 12:01 pm
Ingin Mengubah Tanggal Lahir Akun Google
Zulfikri2020-04-10, 10:33 am
Mau tanya biayanya berapa kalau bikin aplikasi SPPD lengkap
irfan2020-03-14, 10:18 am
selamat pagi pak,apa program sewa mobil ini bisa castem sesuai dengan kebutuhan kami
Aji2020-03-10, 11:39 am
Ini tidak bisa di download min?di info saat download ada notif untuk hubungi admin untuk download aplikasi hrd web
Hamdan2020-03-09, 16:05 pm
Berapa harga membuat aplikasi rental atau penyewaan kamera berbasis web?
rizki firman2020-02-25, 12:05 pm
mau tanya untuk spk metode fuzzy berapa ya? tentang pemilihan tempat wisata
Rendhi roman2020-02-13, 22:38 pm
Untuk Sistem Rekrutment BIsa_
windra2020-02-13, 14:43 pm
untuk harga program data karyawan brp
FERY DIANTA 2020-02-08, 09:51 am
gan mau nanya harga simpeg versi 7 nya_
rudy2020-02-07, 15:58 pm
berapa harga sw management anggota pak_
Manyu2020-02-07, 14:44 pm
berapa harga aplikasi sppd nya_ pls respon cepat melalui email ya, saya berminat mau beli
hendi 2020-01-25, 18:59 pm
untuk afk sofware developer property penjualan di harga berapa _
Suwarto plaz2020-01-21, 15:45 pm
berapa harga aplikasi cuti online?
Heri Nurjono2020-01-20, 09:45 am
Berapa harga Aplikasi data anggota?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat format rupiah dengan javascript