This time again we discuss the problem of numbers in PHP. The application of JQuery Mask to numbers is actually common. But there are still many of us who have not actually implemented the HTML and PHP forms. In the previous article we discussed about the Rupiah Formatting Function in PHP Numbers which explains how to display numbers in rupiah format using the php script. Well this time we will make the same thing, but using JQueryMask javascript.
JQueryMask is a JQuery plugin that is used for masking input numbers on the html form. Examples of its application are rupiah formatting, mobile number, academic year, ISBN, ISSN and so on. The JQuery Mask model itself can be adjusted according to our needs.
JQuery Mask is very important to be applied to input pages. Relating to User Friendly, JQuery Mask is very influential on the user experience so that the display will be more interesting and easier.
Immediately, to the point of discussion, let’s start the tutorial this time by reading Bismillaahirrahmaanirrahiim … ops .. something is left behind. Before starting, it’s a good idea to download the script first. Download JQuery in here, and JQueryMask Javascript you can download in here.
Ok, go ahead and copy the Source Code below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Penerapan Jquery Mask Untuk Angka Pada Form HTML dan PHP</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div class="container"> <h1>Penerapan Jquery Mask Untuk Angka Pada Form HTML dan PHP</h1> <br> <form action="#" method="post"> <div class="form-group"> <label>Rupiah (Rp)</label> <input type="text" class="uang form-control"> </div> <div class="form-group"> <label>No. Handphone</label> <input type="text" class="no_hp form-control"> </div> <div class="form-group"> <label>Tahun Pelajaran</label> <input type="text" class="tapel form-control"> </div> </form> </div> <nav class="navbar fixed-bottom navbar-light bg-dark text-warning"> Lihat Artikel : <a class="text-warning" title="Penerapan Jquery Mask Untuk Angka Pada Form HTML dan PHP" href="https://detriamelia.com/penerapan-jquery-mask-untuk-angka-pada-form-html-dan-php/">Penerapan Jquery Mask Untuk Angka Pada Form HTML dan PHP</a> </nav> <footer class="my-5 pt-5 text-muted text-center text-small"> <p class="mb-1">© 2019 Detri Amelia Chandra</p> </footer> <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> <script type="text/javascript"> $(document).ready(function(){ // Format mata uang. $( '.uang' ).mask('0.000.000.000', {reverse: true}); // Format nomor HP. $( '.no_hp' ).mask('0000−0000−0000'); // Format tahun pelajaran. $( '.tapel' ).mask('0000/0000'); }) </script> </body> </html> |
For the demo, please click the link below:
[the_ad id=”651″]
How, easy right ?! That was the article about Applying Jquery Mask to Numbers in HTML and PHP Forms. May be useful. If you have questions, please ask in the comment form below … 🙂
I score been aquatics online writer than 3 hours today, yet I never launch any gripping article like yours. It is pretty couturier sufficiency for me. In my study, if all tract owners and bloggers prefab just communication as you did, the cyberspace leave be a lot statesman serviceable than e’er before.