I need your help on AutoNumeric js.

I use input and span this way:

<input type="text" name="currency" id="currency">
<span class="value_currency"></span>

I'm using AutoNumeric in javascript like this:

new AutoNumeric('#currency', 'Turkish');

And output as follows:

1.750,15

I need this:

1750.15

My question is, how do I dynamically print in value_currency when the data in the currency changes. But I need raw values not formatted value. Thank you.

I need your help on AutoNumeric js.

I use input and span this way:

<input type="text" name="currency" id="currency">
<span class="value_currency"></span>

I'm using AutoNumeric in javascript like this:

new AutoNumeric('#currency', 'Turkish');

And output as follows:

1.750,15

I need this:

1750.15

My question is, how do I dynamically print in value_currency when the data in the currency changes. But I need raw values not formatted value. Thank you.

• javascript
• jquery

3 Answers 3

In case it's of help to anyone, I ended up using AutoNumeric static method 'getNumber'

https://docs.autonumeric/Documentation/static%20methods/

In this case:

AutoNumeric.getNumber('#currency');

try this!

step 1 : 
      $('#currency').autoNumeric('init'); // initialization
step 2 :
     $('#currency').autoNumeric('set', value); // setting value
step 3 : 
    var price = $('#currency').autoNumeric('get'); // getting value

The code below uses jquery to track when a change is made to the #currency input, I have used broad event triggers so that the code runs on any keydown, paste, etc change. You may want to tweak these to your needs (i.e. reduce the number of triggers). After registering a trigger event the code does the following:

1. Gathers the .val() of the input as s tring
2. Replaces all characters that are not numeric or a decimal point (i.e. your currency characters) with .replace(/[^\d.-]/g, '')
3. Assigns this new condensed string to the .html() of .currency-value.

If you would like mas to remain within the string (i.e. £1,234.56 being simplified to 1,234.56 then change the regex function from .replace(/[^\d.-]/g, '') to .replace(/[^\d.,-]/g, '') (i.e. add a ma within it). The code below currently removes mas.

Let me know if this isn't what you wanted.

Basic Demo (Turkish)

Turkish Lira was added to v4.2.8. This is a basic setup, demonstrating how you can get the raw value just for ma based currencies.

// Apply Autonumeric to #currency input
new AutoNumeric('#currency', 'Turkish');

// Trigger function of any change to #currency input 
$("#currency").on("propertychange change keyup paste input", function(){

  // Get value from input, replace all non-numeric or '.' values 
  rawValue = $(this).val().replace(/[^\d,-]/g, '');
  
  // Replace ma with decimal point
  rawValue = rawValue.replace(",", '.');

  // Print value
  $(".value_currency").html( rawValue );
  
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://unpkg./[email protected]/dist/autoNumeric.min.js"></script>

<input type="text" name="currency" id="currency">
<span class="value_currency"></span>

Extended Demo

This extended demo allows you to use an attr to store the currency type and also whether it is ma or decimal point based.

// Apply Autonumeric to #currency input
$("input[currency]").each(function() {

  // Get id of this element
  currencyID = $(this).attr("id");

  // Apply AutoNumeric to given input
  new AutoNumeric('#' + currencyID, $(this).attr("currency"));

});


// Trigger function of any change to #currency input 
$("input[currency]").on("propertychange change keyup paste input lostfocus", function() {

  // Get divider from the element's attribute
  divider = $(this).attr("currency-divider");

  // Create regex expression and apply
  var regex2 = new RegExp('[^0-9' + divider + ']', 'g');
  rawValue = $(this).val().replace(regex2, '');

  // Decimalisation of non-decimal based currencies by default if only a single divider is specified
  // Automatically applied to ma based currencies only
  if (divider.length == 1 && divider != ".") {
    rawValue = rawValue.replace(divider, '.');
  }

  // Print raw value
  $(this).parent().children(".value_currency").html(rawValue);

});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://unpkg./[email protected]/dist/autoNumeric.min.js"></script>

<p><strong>Automatic decimalisation</strong> is applied if there is only a single character divider added to input. </p>
<p>Attributes needed in the inputs include:<p>
<ul>
  <li>currency - i.e. 'British', 'Turkish'</li>
  <li>currency-divider - i.e. '.' or ',' or ',.'</li>
</ul>

<hr>

<div class="currency-wrapper">

  <label>Turkish ₺</label>

  <input type="text" name="currency" id="currencyTurkish" currency-divider="," currency="Turkish">
  <span class="value_currency"></span>

</div>

<hr>


<div class="currency-wrapper">

  <label>Turkish ₺ (divider set as ma and decimal)</label>
  <input type="text" name="currency" id="currencyTurkishDouble" currency-divider=".," currency="Turkish">
  <span class="value_currency"></span>

</div>

<hr>

<div class="currency-wrapper">

  <label>British £</label>
  <input type="text" name="currency" id="currencyBritish" currency-divider="." currency="British">
  <span class="value_currency"></span>

</div>

<hr>

<div class="currency-wrapper">

  <label>British £ (no divider set)</label>
  <input type="text" name="currency" id="currencyBritishNoDivider" currency-divider="" currency="British">
  <span class="value_currency"></span>

</div>