All Methods Return '.autonumeric Is Not A Function - Can't Unformat Numbers

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

Solution 1:

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 instancevar autoNumericInstance = newAutoNumeric('#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 = newAutoNumeric('#input', AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
    
    $('#input').on('keyup', function() {
    	$('#output').val(autoNumericInstance.getNumericString());
    });
    
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.0.3/autoNumeric.js"></script><scriptsrc="https://code.jquery.com/jquery-3.2.1.js"></script><inputid="input"name="basicPayPerYearInput"type="text"value="123456.78"placeholder="0.00"class="currencyInput validate"><inputtype="text"for="basicPayPerYearInput"id="output">

Solution 2:

@Terry answer is completely right regarding the question asked, however I recommend not using an event listener on your #inputkeyup 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.