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=".1.1/jquery.min.js"></script>
<script src=".js/1.6.5/angular.js"></script>
<script src=".js/1.6.5/angular-resource.js"></script>
<script src=".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'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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.6.5/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare./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:

• javascript
• jquery
• number-formatting
• autonumeric.js

• 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 Commented Oct 24, 2017 at 9:24
• Typed in currency and clicked on that by accident thinking it said currency – nick.cook Commented Oct 24, 2017 at 9: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 (<v2) of autonumeric, which is a jQuery plugin. The later versions are not jQuery-dependent. – Terry Commented Oct 24, 2017 at 9: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 Commented Oct 24, 2017 at 9: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 part of their documentation. – Terry Commented Oct 24, 2017 at 9:36

2 Answers 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./ajax/libs/autonumeric/4.0.3/autoNumeric.js"></script>
<script src="https://code.jquery./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 answer is pletely right regarding the question asked, however I remend 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.