How to get sum of input values using Javascript?

Question

I am not perfect in Javascript... I want to display that total sum of values shown in the amount input boxes in the next field named the sub total without refreshing page. I am trying but can not get success .Can anyone help me to figure it out....? Thanks.. Javascript code for sum of n numbers.

function Mul(index) {
            var quantity = document.getElementsByClassName("quantity")[index].value;
            var price = document.getElementsByClassName("price")[index].value;

            document.getElementsByClassName("amount")[index].value = quantity * price;
            const subTotalField = document.getElementById("subTotal");
            subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}

<table class="table table-center table-hover" id="myTable">
    <thead>
        <tr>
            <th>Description</th>
            <th>Quantity</th>
            <th>Unit Price</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" class="form-control">
            </td>
            <td>
                <input type="number" id="" class=" quantity form-control"
                    onkeyup="Mul('0')">
            </td>
            <td>
                <input type="number" id="" class="price form-control"
                    onkeyup="Mul('0')">
            </td>
            <td>
                <input type="text" id="amount-0" class="amount form-control"
                    disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" class="form-control">
            </td>
            <td>
                <input type="number" id="" class=" quantity form-control"
                    onkeyup="Mul('1')">
            </td>
            <td>
                <input type="number" id="" class="price form-control"
                    onkeyup="Mul('1')">
            </td>
            <td>
                <input type="text" id="amount-1" class="amount form-control"
                    disabled>
            </td>
        </tr>
    </tbody>
</table>
<table class="table table-stripped table-center table-hover">
    <thead></thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td class="text-end">Sub Total</td>
            <td class="text-end" id="subTotal">0</td>
        </tr>
    </tbody>
</table>

Does this answer your question? jQuery sum of input values in sections — Saman Salehi
– Saman Salehi, Commented Dec 24, 2021 at 10:23
For me your snippet works. You need to enter values both into the quantity and the unit price field. — Lajos Arpad
– Lajos Arpad, Commented Dec 24, 2021 at 14:20

Pradeepa · Accepted Answer · 2021-12-23 06:24:50Z

Everytime you are adding the subtotal with the new value.

For example : you entered quantity 10 and unit price 1 then amount is 10 , for the first time you don't have any value in sub total so you will get 0 in parseInt(subTotalField.innerHTML) value.

subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;

subTotalField.innerHTML = 0 + 10*1

subTotalField.innerHTML = 10

But when you are changing value from 10 to 20 in the quantity field, this time you have value in subTotalField.innerHTML

So now it will be

subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;

subTotalField.innerHTML = 10 + 20*1

subTotalField.innerHTML = 30

You are expecting it as 20 but the code is returning 30

So to resolve this issue, you should replace mul function with this

function mul(index) {
            var quantity = document.getElementsByClassName("quantity")[index].value;
            var price = document.getElementsByClassName("price")[index].value;

            document.getElementsByClassName("amount")[index].value = quantity * price;
            const subTotalField = document.getElementById("subTotal");
            var finalAmount = 0;
            Array.from(document.getElementsByClassName("amount")).forEach(ele=>{
                if(ele.value){
                    finalAmount = finalAmount +  ele.value
                }
            })
            subTotalField.innerHTML = finalAmount;
}

barzin.A · Accepted Answer · 2021-12-23 06:26:08Z

function Mul(index) {
  var quantity = document.getElementsByClassName("quantity")[index].value;
  var price = document.getElementsByClassName("price")[index].value;

  document.getElementsByClassName("amount")[index].value = quantity * price;
  const subTotalField = document.getElementById("subTotal");
  subTotalField.innerHTML = Array.from(document.getElementsByClassName("amount")).reduce((sum, element) => {
    if (element.value.length === 0) return sum;
    return sum + parseInt(element.value);
  }, 0)

}

<table class="table table-center table-hover" id="myTable">
  <thead>
    <tr>
      <th>Description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')">
      </td>
      <td>
        <input type="number" id="" class="price form-control" onkeyup="Mul('0')">
      </td>
      <td>
        <input type="text" id="amount-0" class="amount form-control" disabled>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')">
      </td>
      <td>
        <input type="number" id="" class="price form-control" onkeyup="Mul('1')">
      </td>
      <td>
        <input type="text" id="amount-1" class="amount form-control" disabled>
      </td>
    </tr>
  </tbody>
</table>
<table class="table table-stripped table-center table-hover">
  <thead></thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td class="text-end">Sub Total</td>
      <td class="text-end" id="subTotal">0</td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

How to get sum of input values using Javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related