Web application that require numeric textfield is not rare thing anymore. Even the financial application which using a lot of numeric textfields has a web based version now. When working with desktop application development we can easily use the textfield with the automatic thousand separator by applying the mask feature or anything like that. It's very different case if we are working with web application development. The HTML input element doesn't has the thousand separator support yet, so we have to use Javascript to accomplish the task.

There are so many methods to apply the thousand separator support to the HTML input field using the Javascript like using the jQuery plugin from http://www.decorplanit.com/plugin/. But one problem comes, what if we want to apply it to an already finished application? We have to change the server side processing too! Yes because the posted data will contain the thousand and decimal separator too which will make it an invalid number. If you want to update all your server side scripts to strips all the thousand separator character, that's fine too. But we can save the time by using the small plugin that I have created here.

I would like to introduce the jQuery LazzyNumeric plugin which extends jQuery autoNumeric (http://www.decorplanit.com/plugin/). This small plugin will clear all the number format into a plain number just before you submit the form. With this feature we don't have to update our server side scripts at all!

Let's see the example below about how to use this plugin.

<form action="" method="post">
  <table>
    <tr>
      <td>Qty</td><td>:</td>
      <td><input type="text" name="item_qty" class="numeric" /></td>
    </tr>
    <tr>
      <td>Price 1</td><td>:</td>
      <td><input type="text" name="item_price1" class="numeric" /></td>
    </tr>
    <tr>
      <td>Price 2</td><td>:</td>
      <td><input type="text" name="item_price2" class="numeric" /></td>
    </tr>
  </table>
  <br/>
  <input type="submit" name="submit" id="submit" />
</form>
<script language="javascript" type="text/javascript">
  // Use this code to activate the thousand separator format.
  $(".numeric").lazzynumeric();
</script>

Because this plugin extends the autoNumeric plugin from http://www.decorplanit.com/plugin/, all the autoNumeric options can be applied to this plugin too. For the example if we want to use "." as the thousand separator and "," as decimal separator, we just need to pass the following options.

$(".numeric").lazzynumeric({aSep: ".", aDec: ","});

This plugin is available at GitHub, https://github.com/w3shaman/jquery-lazzynumeric. The current version is 1.2 which can be downloaded from https://github.com/w3shaman/jquery-lazzynumeric/releases/tag/1.2.

You may also want to see the live demo there.