How to get total sum from input values using Javascript?-CodePudding

I want to display the total sum of values shown in the amount input-boxes in the next field named sub total without refreshing page.

JS-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;
        }

<table  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" >
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('0') , Add()">
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('0')">
            </td>
            <td>
                <input type="text" id="amount-0" 
                    disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" >
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('1')">
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('1')">
            </td>
            <td>
                <input type="text" id="amount-1" 
                    disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" >
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('2')">
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('2')">
            </td>
            <td>
                <input type="text" id="amount-2" 
                    disabled>
            </td>
        </tr>
    </tbody>
</table>
<div >
    <table >
        <thead></thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td >Sub Total</td>
                <td >0</td>
            </tr>
        </tbody>
    </table>
</div>

CodePudding user response：

I don't know why, but obviously rare are those who understand that using a form has benefits ...

const myForm = document.forms['my-form']

myForm.oninput = ({target: elm}) => // for any change iside the form
  {
  let 
    row = elm.closest('tr')
  , Dsc = row.querySelector('input[name^="desc"]')
  , Qte = row.querySelector('input[name^="quantity"')
  , Prx = row.querySelector('input[name^="price"')
  , Amt = row.querySelector('input[name^="amount"')
    ;
  Dsc.required = (Qte.valueAsNumber > 0)  
  switch (elm.name.split('_')[0]) {
    case 'quantity':
    case 'price':
      Amt.value = Qte.valueAsNumber * Prx.valueAsNumber
      myForm.SubTotal.textContent =
        [...myForm.querySelectorAll('input[name^="amount"')]
          .reduce((sum,el)=>sum    el.value,0)
      break;
    }
  }
myForm.onsubmit = e =>
  {
  e.preventDefault()  // disable  form submiting 

  let formInputs = Object.fromEntries( new FormData(myForm).entries() ) 

  console.clear()
  console.log( formInputs)
  }

table {
  border-collapse: collapse;
  margin : 2em 1em;
  }
td, th {
  padding : .2em;
  border  : 1px solid darkblue;
  }
input {
  width      : 6em;
  text-align : right;
  }
td:first-of-type input {
  width      : 10em;
  text-align : left;
  }

<form name="my-form">
  <table>
    <thead>
      <tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr>
    </thead>
    <tbody>
      <tr>
        <td> <input type="text"   name="desc_1" >                      </td>
        <td> <input type="number" name="quantity_1" value="0" min="0"> </td>
        <td> <input type="number" name="price_1"    value="0" min="0"> </td>
        <td> <input type="text"   name="amount_1"   disabled value="0"></td>
      </tr>
      <tr>
        <td> <input type="text"   name="desc_2" >                      </td>
        <td> <input type="number" name="quantity_2" value="0" min="0"> </td>
        <td> <input type="number" name="price_2"    value="0" min="0"> </td>
        <td> <input type="text"   name="amount_2"   disabled value="0"></td>
      </tr>
      <tr>
        <td> <input type="text"   name="desc_3" >                     </td>
        <td> <input type="number" name="quantity_3" value="0" min="0"> </td>
        <td> <input type="number" name="price_3"    value="0" min="0"> </td>
        <td> <input type="text"   name="amount_3"   disabled value="0"></td>
      </tr>
   </tbody>
    <tfoot>
      <td colspan="4"> Sub Total : <output name="SubTotal">0</output> </td>
    </tfoot>
  </table>
  <button type="submit">submit</button>
</form>

CodePudding user response：

Did you try this way? Adding the current value of the amount with new value will give you the total sum.

   document.getElementsByClassName("amount")[index].value  = quantity * price;

CodePudding user response：

You can assign an id to the subtotal cell and change its value on every Mul call.

Something like 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");
  subTotalField.innerHTML = parseInt(subTotalField.innerHTML)   quantity * price;
}

<html>
<body>
<table  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" >
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('0') , Add()">
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('0')">
            </td>
            <td>
                <input type="text" id="amount-0" 
                    disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" >
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('1')">
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('1')">
            </td>
            <td>
                <input type="text" id="amount-1" 
                    disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" >
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('2')">
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('2')">
            </td>
            <td>
                <input type="text" id="amount-2" 
                    disabled>
            </td>
        </tr>
    </tbody>
</table>
<div >
    <table >
        <thead></thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td >Sub Total</td>
                <td id="subTotal" >0</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>