3

I'm trying to get the raw values of input numbers formatted using autoNumeric, but can't because every method I try to do this with it returning '.autoNumeric is not a function' in the console.

$(document).ready(function() {

    new AutoNumeric('#input',  AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
    
    $('#input').on('keyup', function() {
     $('#output').val($('#input').autoNumeric('getString'));
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.0.3/autoNumeric.js"></script>

<input id="input" name="basicPayPerYearInput" type="text" value="123456.78" placeholder="0.00" class="currencyInput validate">

<input type="text" for="basicPayPerYearInput" id="output">

I can't even initialise inputs properly as written in most of the documentation using $(selector).autoNumeric(), so I've had to use the above 'new AutoNumeric', which is strangely also used in some documentation and is the only way that works:

isherwood
  • 58,414
  • 16
  • 114
  • 157
nick.cook
  • 2,071
  • 4
  • 18
  • 36
  • 4
    What does this have to do with concurrency? Sounds like you're missing a reference to the plugin either that or you have it in the wrong place. – Master Yoda Oct 24 '17 at 09:24
  • Typed in currency and clicked on that by accident thinking it said currency – nick.cook Oct 24 '17 at 09:25
  • 2
    Your error message indicates that `autoNumeric()` is not a jQuery method (which is true, it's not dependent on jQuery). You seem to have read the old documentation ( – Terry Oct 24 '17 at 09:26
  • Could you point me in the direction of the new documentation? I've had a good look and can't find anything anywhere that matches the non-jquery version. I just need to know what method to use to get a numeric string from an input value – nick.cook Oct 24 '17 at 09:32
  • @nick.cook See my answer. p/s: Their docs are *very* convoluted, but not surprising since it is a very powerful library. Check their [getter/setter](https://github.com/autoNumeric/autoNumeric#set-get-format-unformat-and-other-usual-autonumeric-functions) part of their documentation. – Terry Oct 24 '17 at 09:36

2 Answers2

2

It seems like you have been reading the documentation for the old API of AutoNumeric plugin. The plugin has been rewritten since them to be independent of jQuery, which means that .autoNumeric() is no longer a valid jQuery method.

What you want to do is to store the AutoNumeric instance at runtime, and then simply use the getter method .getNumericString() on the instance to retrieve its string value:

// Store instance
var autoNumericInstance = new AutoNumeric('#input', AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);

$('#input').on('keyup', function() {
    // Retrieve instance numeric string value
    $('#output').val(autoNumericInstance.getNumericString());
});

See proof-of-concept example here (or the updated fiddle):

$(document).ready(function() {

    var autoNumericInstance = new AutoNumeric('#input', AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
    
    $('#input').on('keyup', function() {
     $('#output').val(autoNumericInstance.getNumericString());
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.0.3/autoNumeric.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<input id="input" name="basicPayPerYearInput" type="text" value="123456.78" placeholder="0.00" class="currencyInput validate">

<input type="text" for="basicPayPerYearInput" id="output">
Terry
  • 63,248
  • 15
  • 96
  • 118
  • Thanks. Didn't know the instances needed to be stored as variables – nick.cook Oct 24 '17 at 09:53
  • @nick.cook You do not have to store them, for example, if it is a one-time setup and you don't plan to set/get anymore from it. But if you need to reference them later, you will have to do it. – Terry Oct 24 '17 at 09:54
  • Unfortunately, this does not work when you have defined your aNvariable with the static 'multiple' method (because you needed to). You need a different approach which I haven't found as yet. As powerful as the AutoNumeric library is, it severely lacks in understandable documentation. Proper examples for different usages would be extremely helpful. I am working on my own manual. – Luftwaffle Jul 09 '21 at 00:54
2

@Terry answer is completely right regarding the question asked, however I recommend not using an event listener on your #input keyup event, since AutoNumeric does not always update the element value on each keyup, for instance when a bad key is entered by the user, ie. the key A.

If you want to update your #output element with the numeric string only when it really change, then you should listen to the custom event 'autoNumeric:rawValueModified', so:

instead of:

$('#input').on('keyup', function() {
    $('#output').val(autoNumericInstance.getNumericString());
});

you should use:

const outputElm = document.querySelector('#output');
const inputElm = document.querySelector('#input');
inputElm.addEventListener('autoNumeric:rawValueModified', e => {
    outputElm.value = e.newRawValue;
});

The documentation about the custom events sent by AutoNumeric. Also checkout how you can add callbacks to all the get* functions.

Alex
  • 1,241
  • 13
  • 22