CurrencyEditControl v0.9.4

Transform your input text control into a currency edit control. -->

Features

• Fully JavaScript (i.e. compatible with any server-side language [use free sofware!!])
• Automatic input control conversion with a single attribute in the input tag, or using a special id attribute.
• Customize options for currency symbol and separators.
• Automatic formatting.
• Automatic re-formatting when edit's form submit (i.e. the input's value is submitted as a normal number).
• GPL License.

Use

At the head section of your page, add two following lines:

<script type="text/javascript" src="currencyeditcontrol.js"></script>
<link type="text/css" rel="stylesheet" href="currencyeditcontrol.css">

If you want to override defaults symbol ($) and separators (point and comma), you need to define some hidden inputs, as following examples:

<input type="hidden" id="CEC_CURRENCY_SYMBOL" value="&pound;">
<input type="hidden" id="CEC_CURRENCY_SYMBOL_POS" value="r">
<input type="hidden" id="CEC_DECIMAL_SEPARATOR" value=",">
<input type="hidden" id="CEC_THOUSANDS_SEPARATOR" value=".">

First parameter is the currency symbol; default is "$", and you can use any symbol here, for example £ (£), € (€), ¥ (¥), and others. You can use more than one character, but large strings are problematics. Second parameter indicates the currency symbol position: left (l)[default] or right (r). Two final parameters are for decimal (default is dot) and thousands separators (default is comma).

Also, you can define the number of decimal positions (default is 2), for example:

<input type="hidden" id="CEC_DECIMAL_QUANTITY" value="3">

Now, you have two options, according if is important for you complaint with XHTML:

Use pseudo-attribute "currencyedit" (not XHTML complaint)

You only need to add one attribute to your input text code, as following example:

<input type="text" name="edit1" id="edit1" currencyedit="true">

Use a specially formatted "id" attribute

You need to use an id attribute with following characteristics: A prefix CEC_ plus any name. For example:

<input type "text" name="edit1" id="CEC_edit1">

Example

Now, you cannot write other symbols than numbers and separators. If you write a correct number, the value will be formatted as a currency automatically when the focus pass to another control. When a currency edit control grab the focus, the format dissapears to edit the value without problems.

If you want to assign a value to a CurrencyEditControl, don't use the sintax edit.value=number; instead, use the method edit.setCurrencyValue(number). This method will format the number automatically (i.e. the number should be a "normal" float value). You can test this method writing a numeric value into the input at left of "Assign"button, now press that button and the value will be asigned into the last edit control.

In the same way, if you want to get the real currency value (non formatted), use the method edit.getCurrencyValue().

Another example with pound as currency is here.

Notes

• If you're going to use this library, please send me an e-mail, and would be great if you include a photo of your city :) (se habla español)
• CurrencyEditControl works in *real* browsers (i.e. Mozilla family). I don't known about IE.
• There is an issue with onchange event of the controls that are used as CurrencyEditControls: if you define your own onchange event as an attribute of the tag, the event will be dispatched *before* the currency value is assigned in the control, that is, if you use the onchange event, you will be unable to obtain the real value of the control (instead, you'll get the previous value). To avoid this problem, you can use the currencyedit_onchange pseudo-event, but this is not XHTML complaint.
• If the input control's value is blank, the value is automatically set to "0.00" (or "0[decimal_separator]00", according your setup). To override this behaviour define an input hidden as following: <input type="hidden" id="CEC_AUTO_ZEROES" value="false">
• You can modify the currency symbol style with the CSS file currencyeditcontrol.css.

Bugs

• Some invalid characters are allowed to type (but discarted when the value is formatted).

Download

Version history:

• Version 0.9.0 : Initial release.
• Version 0.9.1 : Minor bug correction.
• Version 0.9.2 : Numeric format on submit fixed.
• Version 0.9.3 : Automatic conversion of "." into the real decimal separator.
• Version 0.9.4 : Allow to define the number of decimal digits.

Here's a tgz file with complete code and examples.

Author

By Hugo Ortega-Hernández - hugorteg{drop-this-text}@gmail.com

You can support free software! Consider that there are non-free similar projects, with less features and higher costs... so, if you donate some money, you can contribute to develop more quality free software.

If I received one Euro or dollar whenever somebody download one of my JS widgets, I would have more time to develop new useful ideas for all of you, and to support other free software projects of course...

Are you interested in new really-useful-controls? [as new generation web applications such as google]... Send me an e-mail...

Other JavaScript controls

You can find other JavaScript controls here.