Search code examples
javascriptautonumeric.js

How to update options or change currency after initialized


I'm using https://github.com/autoNumeric/autoNumeric/blob/master/README.md#options-update

And can't figure out how to update the options in AutoNumeric

So the expect result is to change the currency as I want from the selection

But it shows error update is not a function

Or did I miss something about the update I've been using?

document.getElementById('anPrice_set').addEventListener('change',autoNumericLoad)
var an_obj

function autoNumericLoad() {
  var elemPrice = document.getElementById("anPrice_set")
  var priceSelect = elemPrice.options[elemPrice.selectedIndex].value
  var elemsPrice = document.querySelectorAll('[name="price"], #amount')
  if (AutoNumeric.isManagedByAutoNumeric(elemsPrice[0])) {
   an_obj.update(AutoNumeric.getPredefinedOptions()[priceSelect]) //**
  } else {
   an_obj = AutoNumeric.multiple('[name="price"], #amount', AutoNumeric.getPredefinedOptions()[priceSelect])
  }
}

document.addEventListener('DOMContentLoaded',() => {
autoNumericLoad()
document.getElementById('anPrice_set').addEventListener('change',autoNumericLoad)
})
<script src="https://unpkg.com/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
<div>
  <label for="anPrice_set">*Currency*</label>
  <select id="anPrice_set">
    <option value="dollar">$1,234,567.89 - dollar</option>
    <option value="dotDecimalCharCommaSeparator">1,234,567.89</option>
    <option value="commaDecimalCharDotSeparator">1.234.567,89</option>
    <option value="euro">1.234.567,89 € - euro</option>
    <option value="integer">1,234,568</option>
    <option value="French">1.234.567,89 € - French</option>
    <option value="Spanish">1.234.567,89 € - Spanish</option>
    <option value="NorthAmerican">$1,234,567.89 - NorthAmerican</option>
    <option value="British">£1,234,567.89 - British</option>
    <option value="Swiss">1'234'567.89 CHF - Swiss</option>
    <option value="Japanese">¥1,234,567.89 - Japanese</option>
    <option value="Chinese">¥1,234,567.89 - Chinese</option>
    <option value="Brazilian">R$1.234.567,89 - Brazilian</option>
    <option value="Turkish">1.234.567,89₺ - Turkish</option>
    <option value="numeric">1234567.89</option>
  </select>
</div>
<div>
  <input name="price">
  <input name="price">
  <input name="price">
  <input id="amount">
</div>


Solution

  • See the docs you need to assign your an_obj to an Autonumeric instance like:

    const an_obj = new AutoNumeric(domElement);
    

    Then you'll be able to call update for an_obj