JQuery: Format input text to have comma and decimal for currency


There's a cool JQuery plugin that will allow you to add comma or decimals to HTML input text for currency purposes. The plugin is very useful and easy to set up. You can download autoNumeric at gitHub.



You can view the complete documentation at the link but if you want to stick with this simple guide then you can tag along with me.

The first thing to do is you must download the javascript at the link provided. Just save it to whatever you want to name it. I prefer the autoNumeric.js for easy location. Save the file to where your javascript folder is.

Add the code below between your <head></head> tags to locate the script that we will be using


<script src="link_to_autoNumeric.js'"></script> 

Once you have it, you can add this jquery script inside the <head></head> tags.

<script type="text/javascript">

    /* COMMA IN CURRENCY */

    jQuery(function($) {
        $('.auto').autoNumeric('init');
    });


</script>



The JQuery will find the class named 'auto' then apply the standard format, which is putting comma and decimal to your input text. Also in addition, it only accepts numeric value.







Your input text will be like this







<input type="text" name="demo" id="demo" class="auto" data-a-sep=",">







data-a-sep="," tells the script what separator you will be using. You can change it to (.) or whatever you want. As you can see the class for your input is 'auto' just make sure you named it like that. You can change it as long as you will also change the name of class in the JQuery script above.







That's all about IT!