How to calculate total with AutoNumeric

Question

I'm using http://autonumeric.org/ or https://github.com/autoNumeric/autoNumeric/blob/master/README.md

How to fix

• When I use JS function to calculate the sum total appear, but not as formatted AutoNumeric as I want it to be

• When mouse hover the calculated field, it disappears

 var taxRate = 0.10
   function calculateAmount() {
      var elemsAmount = document.getElementsByName("tAmount")
      var total = 0
      elemsAmount.forEach(function(e){
        total += Number(e.value.replace(',',''))
      })
      document.getElementById("total").value = total
      document.getElementById("tax").value = total*taxRate
      document.getElementById("finalTotal").value = total+total*taxRate
    }
    document.getElementById("tableBox").addEventListener("change",calculateAmount)
    
    new AutoNumeric.multiple('[contenteditable="true"]', 'dotDecimalCharCommaSeparator')

<script src="https://unpkg.com/autonumeric" type="text/javascript"></script>
  <div id="tableBox">
    <div name="tableRow">
      <div class="col s3">
        <div class="input-field">
          <input type="text" name="tAmount" contenteditable="true">
          <label>input</label>
        </div>
      </div>
    </div> <!-- name tableRow -->
      
    <div name="tableRow">
      <div class="col s3">
        <div class="input-field">
          <input type="text" name="tAmount" contenteditable="true">
          <label>input</label>
        </div>
      </div>
    </div> <!-- name tableRow -->
  </div> <!-- id tableBox -->
  
Auto JS Calculation fields
        <div class="input-field">
          <input type="text" id="total" contenteditable="true">
          <label for="total">Total</label>
        </div>
        <div class="input-field">
          <input type="text" id="tax" contenteditable="true">
          <label for="tax">Tax</label>
        </div>
        <div class="input-field">
          <input type="text" id="finalTotal" contenteditable="true">
          <label for="finalTotal">Final Total</label>
        </div>
Expect output #,###.##<br>
Also the problem is when mouse hover on the Calculation field, it disappears

Thank you in advance

Answer 1

You should initialise and save the Autonumeric fields and use the Autonumeric API to update the value using .set(). You can do the same with the input fields and use .getNumber() to do your calculations.

As far as I know you can safely remove the contenteditable="true" attribute from <input/> elements — these are designed to be "editable".

const taxRate = 0.10
const config = 'dotDecimalCharCommaSeparator'

const totalInput = new AutoNumeric('#total', config)
const taxInput = new AutoNumeric('#tax', config)
const finalTotalInput = new AutoNumeric('#finalTotal', config)

const elemsAmount = new AutoNumeric.multiple('[name="tAmount"]', config)

const tableBox = document.getElementById('tableBox')

function calculateAmount() {
  let total = 0

  elemsAmount.forEach(function(e) {
    total += e.getNumber()
  })

  totalInput.set(total)
  taxInput.set(total * taxRate)
  finalTotalInput.set(total + total * taxRate)
}

tableBox.addEventListener('change', calculateAmount)

<script src="https://unpkg.com/autonumeric" type="text/javascript"></script>

<div id="tableBox">
  <div name="tableRow">
    <div class="col s3">
      <div class="input-field">
        <input type="text" name="tAmount">
        <label>input</label>
      </div>
    </div>
  </div>
  <div name="tableRow">
    <div class="col s3">
      <div class="input-field">
        <input type="text" name="tAmount">
        <label>input</label>
      </div>
    </div>
  </div>
</div>

Auto JS Calculation fields

<div class="input-field">
  <input type="text" id="total">
  <label for="total">Total</label>
</div>

<div class="input-field">
  <input type="text" id="tax">
  <label for="tax">Tax</label>
</div>

<div class="input-field">
  <input type="text" id="finalTotal">
  <label for="finalTotal">Final Total</label>
</div>