How to set value to autonumeric element programmatically?

Question

I use (autonumeric@4.1.0) with laravel 5.7/jquery 3.4.1 app and I need to set value to autonumeric element programmatically on event triggered. Looking at description https://github.com/autoNumeric/autoNumeric

I see example with set method :

anElement.set(42.76);

I have have problems with this was, as in public/js/Backend/bookings-and-availability.js which I attach in blade file I have :

function bookingsAndAvailability(page, paramsArray) { // constructor of backend bookingsAndAvailability listing - set all from referring page and from server
  // elements init
  ...
  new AutoNumeric('#numeric_check_fees', {
    currencySymbolPlacement: this_current_currency_position,
    currencySymbol: this_current_currency_short,
    maximumValue: '9999999999.99',
    minimumValue: 0.00
  });
  const check_feesAutoNumeric = document.querySelector('#numeric_check_fees');
  check_feesAutoNumeric.addEventListener('autoNumeric:rawValueModified', e => {
    if (typeof e.detail.newRawValue != "undefined") {
      $("#check_fees").val(e.detail.newRawValue)
    }
  });
  ...

// event handling:
bookingsAndAvailability.prototype.feeDictionaryItemSelect = function(selected_value) {

  // anElement.set(42.76);
  check_feesAutoNumeric = document.querySelector('#numeric_check_fees');
  check_feesAutoNumeric.set(selected_value)
}

But I got error :

bookings-and-availability.js?dt=1592282828:1708 Uncaught TypeError: check_feesAutoNumeric.set is not a function
        at bookingsAndAvailability.feeDictionaryItemSelect (bookings-and-availability.js?dt=1592282828:1708)
        at HTMLSelectElement.onchange (bookings-and-availability:991)

Which is a valid way ?

MODIFIED : I found a possible decision after setting value to init numeric element one more time, like :

$("#numeric_check_fees").val(selected_value)
new AutoNumeric('#numeric_check_fees', {
    currencySymbolPlacement: this_current_currency_position,
    currencySymbol: this_current_currency_short,
    maximumValue: '9999999999.99',
    minimumValue: 0.00
});

const check_feesAutoNumeric = document.querySelector('#numeric_check_fees');
check_feesAutoNumeric.addEventListener('autoNumeric:rawValueModified', e => {
    if (typeof e.detail.newRawValue != "undefined") {
        $("#check_fees").val(e.detail.newRawValue)
    }
});

and it works, but I got warning that numeric element was already inited. Are there better decision?

Thanks!

Alex · Accepted Answer · 2022-08-31T21:37:45.057

You get the Uncaught TypeError: check_feesAutoNumeric.set is not a function error because check_feesAutoNumeric is not an AutoNumeric object, but a simple DOM element returned by your call to document.querySelector('#numeric_check_fees').

The best way to be able to use .set(42.76), would be to keep a reference to your AutoNumeric object during initialization, for instance doing this:

const anElement = new AutoNumeric('#numeric_check_fees', {
    currencySymbolPlacement: this_current_currency_position,
    currencySymbol: this_current_currency_short,
    maximumValue: '9999999999.99',
    minimumValue: 0.00
});

...then use that reference whenever needed to change the element value:

anElement.set(42.76);

How to set value to autonumeric element programmatically?

1 Answers1