Adding Numbers using Javascript from HTML forms without Submit or Refresh

Question

Hi I am trying to create a form using HTML where users can insert numbers in form number 1 and form number 2. Once the 2 forms are filled with numbers the total shows automatically in the lower row without a submit button.

Note that the forms are Django Forms

Here is what I have tried.

var item_1_amount = document.getElementById("item_1_amount");
var item_2_amount = document.getElementById("item_2_amount");
var total = item_1_amount.value + item_2_amount.value
item_1_amount.onkeyup = function () {
    document.getElementById("Total").innerHTML = total.value;
};

<tr>
 <td><h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
    <input
      autocomplete="off"
      type="number"
      class="form-control w-25"
      name="item_1_amount"
      id="item_1_amount"
      style="float:left"/>
  </td>
  <td><h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
    <input
      autocomplete="off"
      type="number"
      class="form-control w-25"
      name="item_2_amount"
      id="item_2_amount"
      style="float:left"/>
  </td>
</tr>

<tr>
<th>Total</th>
<th id="Total">$$</th>
</tr>

Professor Abronsius · Accepted Answer · 2021-09-08 15:10:41Z

1

To ensure the calculations are only performed when both input elements have values you can track the input elements values using an object literal ( or other ) - values get assigned when the event handlers register a change.

/* shorthand utility functions */
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);

/*
  Store values from input elements in this object. 
  When this contains exactly 2 items perform the calculations.
*/
const results={};


qa('[type="number"].form-control').forEach(input=>input.addEventListener('keyup',function(e){
  /* add the value against the id to the object described above */
  results[ this.name ]=Number( this.value );
  
  /* perfrom calculations on stored values ~ use array.reduce() to generate the SUM */
  if( Object.keys( results ).length==2 ){
    q('th#total').textContent=[ ...Object.values( results ) ].reduce((a,v)=>a+v);
  }
}));

#total:before,
label:before{content:'$'}

label{
  display:inline-block;
}

<table>
  <tr>
   <td>
     <label>
       <input autocomplete="off" type="number" class="form-control w-25" name="item_1_amount" />
     </label>
    </td>
    <td>
      <label>
        <input autocomplete="off" type="number" class="form-control w-25" name="item_2_amount" />
      </label>
    </td>
  </tr>
  <tr>
    <th>Total</th>
    <th id="total"></th>
  </tr>
</table>

edited Sep 8, 2021 at 15:10

answered Sep 8, 2021 at 7:25

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A_K Over a year ago

Works perfectly fine.. A question if I want to add more variable I add new const to match the number of variables and in the calculations the length== then number of added variables.. is that correct. I am trying to break it down into pieces

Professor Abronsius Over a year ago

Can you elaborate? Do you mean that if there are to be, for instance, 5 input fields then you would assign the number(5 or whatever) to a constant and then, in the Object.keys( results ).length==X use that constant? If so then I think yes but I'm not 100% clear as to your meaning..sorry.

The KNVB · Accepted Answer · 2021-09-08 02:40:43Z

0

You may change the item_1_amount.onkeyup function as below:

item_1_amount.onkeyup = function () {
    var total = item_1_amount.value + item_2_amount.value
    document.getElementById("Total").innerHTML = total;
};

answered Sep 8, 2021 at 2:40

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

Comments

Silo QIAN · Accepted Answer · 2021-09-08 02:42:05Z

0

move some code, that's all.

// Here is the answer.
item_1_amount.onkeyup = function () {
    var item_1_amount = document.getElementById("item_1_amount");
    var item_2_amount = document.getElementById("item_2_amount");
    var total = item_1_amount.value + item_2_amount.value
    document.getElementById("Total").innerHTML = total.value;
};

<tr>
 <td><h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
    <input
      autocomplete="off"
      type="number"
      class="form-control w-25"
      name="item_1_amount"
      id="item_1_amount"
      style="float:left"/>
  </td>
  <td><h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
    <input
      autocomplete="off"
      type="number"
      class="form-control w-25"
      name="item_2_amount"
      id="item_2_amount"
      style="float:left"/>
  </td>
</tr>

<tr>
<th>Total</th>
<th id="Total">$$</th>
</tr>

answered Sep 8, 2021 at 2:42

Silo QIAN

609 bronze badges

2 Comments

The KNVB Over a year ago

variable total is not an object, it causes the error.

Silo QIAN Over a year ago

You should press F12 or right click the page, select inspect, add a breakpoint to the var total = ....., refresh, then you can see what's wrong with it, and are the variables correct or not.

Collectives™ on Stack Overflow

Adding Numbers using Javascript from HTML forms without Submit or Refresh

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related