Implementing autoNumeric jQuery Plugin in Websites that Generated by PHPMaker 9.2.0

This is the first time ever I used the autoNumeric jQuery plugin. It is one of the best jQuery plugins for formatting the numeric value based on the specific format. This plugin is also very useful if you want to auto-format the number while your web application users are entering the value on the textbox. For example, when your users are typing "1234" on a textbox in the form, then the typed value will automatically be converted become "$ 1,234" on the textbox.

The following trick will show you how to implement it in websites that generated by PHPMaker. The most important part that you will get is how then you will be able to convert it back into the original value such as "1234". Yes, removing the thousand separator, removing the decimal separator, removing the currency symbol, and so on. Unfortunately, since autoNumericGet --- which will re-convert back the formatted value into the original one --- does not work properly in Form_CustomValidate function, then we will use another technique which will work properly, as well as the autoNumericGet.

You will get so many advantages after implementing this jQuery plugin in your web application that generated by PHPMaker as following:
- Convert the derived value from database become the formatted value when the form is loaded.
- No need to write so many lines of code in order to auto-format the typed values on the textbox.
- You will still be able to use the Format attribute under the DIV Tag Attributes of the field setup. It won't clash with the plugin.
- Converting it back to the original value before saving to database.

However, thanks to the author of the plugin. I just sent him a donation for his great plugin. Hope he will continue maintain this plugin.
How about you? 🙂

[hidepost]

1. Download the plugin by clicking this link. Just for your information, you only need one .js file; autoNumeric.js.
2. Copy the autoNumeric.js file to your \Script\ directory.
3. Open your \Script\control.xml file, and find this code:

   <control id="jsrender.js" type="copy" ofolderid="_js" ifiles="jsrender.js" />
   

   before that line, please insert the following code:

   <control id="autoNumeric.js" type="copy" ofolderid="_js" ifiles="autoNumeric.js" />
   

4. Open your PHPMaker project (.pmp) file, and then click on Code (Server Events, Client Scripts and Custom Templates) tab, and then go to Server Events -> Global -> All Pages -> Page_Head, and then insert the following code into the code editor on the right pane:

   ew_AddClientScript("phpjs/autoNumeric.js");  // include the jQuery plugin
   

5. Still from the Client Scripts section, expand again the following location: Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script, and then insert the following code into the code editor:

   $(document).ready(function(){
     $('#x_mynumber').autoNumeric('init', {aSign:'<?php echo $DEFAULT_CURRENCY_SYMBOL; ?> ', aPad: false});
   });
   

   Please read the documentation of the plugin for more options which you can use easily. In this example, we want to display the currency symbol (aSign: ' '), and removing the decimal symbol (aPad: false). So, the value of "1234" will become: "$ 1,234".

6. Still from the Client Scripts section, expand again the following location: Client Scripts -> Table-Specific -> Add/Copy Page -> Form_CustomValidate, and then insert the following code into the code editor:

       document.getElementById("x_mynumber").value = Number($('#x_mynumber').autoNumeric('get'));
   

   before the following line of code:

       return true;
   

   Please note, this is important, and make sure you do not skip this step, since this will re-convert the value back to the original one, by removing the currency symbol, the separator character, and so on.

7. Repeat the step 5 and 6 for Edit Page of your Client Scripts in order to insert the same code for your Edit pages.
8. Finally, re-generate your script files using PHPMaker as always.

[/hidepost]