Membuat Format Mata Uang Pada Form Input Dengan Jquery

Hallo teman-teman Dumet School, Kembali lagi dengan sayaÂ Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Format Mata Uang Pada Form Input Dengan Jquery. Dimana pada pembahasan kali ini saya menggunakan fungsi dari jquery mask untuk membuat format mata uang pada form input.

Oke langsung saja untuk dapat mengetahui cara Membuat Format Mata Uang Pada Form Input Dengan Jquery kita buat terlebih dahulu struktur htmlnya seperti script di bawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Format Mata Uang Pada Form Input Dengan Jquery</title>
	<meta charset="utf-8">
	<style type="text/css">
	    h3 {
	        font-weight: 500;
	}
	.container {
	    font-family: 'Roboto', Arial, Sans-serif;
	    font-size: 16px;
	    font-weight: 400;
	    left: 50%;
	    position: absolute;
	    top: 0;
	    transform: translate(-50%, 5%);
	}
	.group {
	    display: block;
	    margin-bottom: 1.5em
	}
	label {
	    display: block;
	    margin-bottom: .5em
	}
	input {
	    border: 2px solid salmon;
	    border-radius:4px;
	    font-family: 'Roboto', Arial, Sans-serif;
	    font-size: 16px;
	    outline: none;
	    padding: .5em 1em;
	}
	</style>
</head>
<body>
	<!-- Input Form -->
	<div class="container">
	    <h3>Membuat Format Mata Uang Pada Form Input Dengan Jquery</h3>
	    <br>
	    <form action="#" method="post">
	        <div class="group">
	            <label>Rp</label>
	            <input type="text" class="uang">
	        </div>
	    </form>
	</div>
</body>
</html>

Jika sudah selesai membuat struktur htmlnya dimana didalamnya ada form input. Lalu teman-teman jangan lupa cantumkan link di bawah ini agar bisa menggunakan fungsi dari jquery mask. Teman-teman bisa letakan di dalam tag head htmlnya.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/1ef022ab/dist/jquery.mask.min.js"></script>

Lalu langkah terakhir untuk Membuat Format Mata Uang Pada Form Input Dengan Jquery kita buat script jquerynya. Teman-teman bisa salin script jquery di bawah ini.

<script type="text/javascript">
	$(document).ready(function(){
	    // Format mata uang.
	    $( '.uang' ).mask('0.000.000.000', {reverse: true});
	})
</script>

Oke teman-teman bisa lihat script di atas, dimana selector class uang saya berikan fungsi mask dengan value mata uang.

Jika teman-teman jalankan di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Format Mata Uang Pada Form Input Dengan Jquery. Semoga artikel ini dapat bermanfaat dan menambah pengetahuan teman-teman. Untuk teman-teman yang penasaran teman-teman bisa langsung mencobanya. Sampai ketemu lagi di pembahasn selanjutnya dan selamat mencoba.

Membuat Format Mata Uang Pada Form Input Dengan Jquery

Kategori