Plugin Javascript Autonumeric JS Untuk Formating Currency

Plugin Javascript Autonumeric JS Untuk Formating Currency

Sobatcoding.com - Plugin Javascript Autonumeric.js Untuk Formating Currency Atau Numeric

Kita kali ini akan mencoba belajar menggunakan plugin javascript bernama Autonumeric.js. Plugin ini sangat berguna untuk kalian yang mencari plugin javascript yang bisa digunakan untuk formating currency pada file input. Bagaimana cara penggunaannya? Berikut langkah-langkahnya:

 

Inisialisasi Autonumeric

Sebelumnya kita download terlebih dahulu plugin autonumeric js melalui link berikut http://autonumeric.org/. Untuk contoh kali ini admin menggunakan AutoNumeric.js v4.5.4. Kalian biasa sesuaikan dengan versi yang paling baru. Contoh kita buat file html seperti berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Autonumeric JS</title>
//Tambahkan file jquery dan autonumeric js yang telah di download atau mengunakan CDN
        <script src="./jquery.min.js"></script>
        <script src="./autonumeric.js"></script>

    </head>
    <body>
        <input id="input-vol" value="0"/>
    </body>
</html>

Untuk inisialisasi banyak elemen sekaligus kita bisa gunakan script berikut:

<script>
	new AutoNumeric( '#input-vol', {decimalCharacter: AutoNumeric.options.decimalCharacter.comma,digitGroupSeparator: AutoNumeric.options.digitGroupSeparator.dot});
</script>

atau untuk multiple class kita bisa gunakan kode seperti berikut.

new AutoNumeric.multiple(elm, AutoNumeric.getPredefinedOptions().commaDecimalCharDotSeparator );

artinya untuk separator desimal menggunakan koma (comma) dan separator ribuan menggunakan titik.

Get Autonumeric Value

Untuk mendapatkan autonumeric value melalu javascript kita bisa gunakan kode seperti berikut.

var volume = AutoNumeric.getAutoNumericElement( '#input-vol').get();

console.log(volume);

 

Set Value Autonumeric 

Untuk set autonumeric dinamically atau secara dinamis kita bisa gunakan script sebagai berikut

AutoNumeric.getAutoNumericElement('#input-vol').set(0);

 

Untuk full code javascript nya seperti beriku.

<script>
	new AutoNumeric( '#input-vol', {decimalCharacter: AutoNumeric.options.decimalCharacter.comma,digitGroupSeparator: AutoNumeric.options.digitGroupSeparator.dot});

	AutoNumeric.getAutoNumericElement('#input-vol').set(10000);
	var volume = AutoNumeric.getAutoNumericElement( '#input-vol').get();
	console.log(volume);

</script>