How to add the two textbox value using javascript

Question

This link shows how I tried to add two text box values but the addition of the value is wrongly calculated.

This my javascript code:

$("#amount").on("input", function () 
{
    const originalDebit = $('#debit').val();
    const amount = $('#amount').val();
    const tot = parseFloat(originalDebit) + parseFloat(amount);
    $('#debit').val(tot);
});

hi tom its giving correct value, you enter 1 and the out put shall be 12346.. — Rex5
– Rex5, Commented Jun 29, 2019 at 6:06
you got it man, check the solution given below it was happening because amount was becoming NaN. — Rex5
– Rex5, Commented Jun 29, 2019 at 6:13

Mamun · Accepted Answer · 2019-06-29 06:20:22Z

1

You can check whether the value is a number or not with isNaN() OR empty before doing the addition. In such cases assign 0 to the variable.

Please Note: You also have to declare originalDebit outside of the event handler function to retain the original value on each change:

Try the following way:

const originalDebit = $('#debit').val().trim();
$("#amount").on("input", function () {
  const amountVal = $('#amount').val().trim();
  const amount = (isNaN(amountVal) || amountVal == "") ? 0 : amountVal;
  const tot = parseFloat(originalDebit) + parseFloat(amount);
  $('#debit').val(tot);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="amount">
<p>D<input  value ="12345" id="debit"></p>

edited Jun 29, 2019 at 6:20

answered Jun 29, 2019 at 6:07

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

13 Comments

Jacky Over a year ago

the value is not refreshing.if you clear the answer the old value is not displaying

Mamun Over a year ago

@Tom, declare originalDebit outside the event handler function, updated the answer please check:)

Jacky Over a year ago

you write but when i write you code in my coding page the result is not coming for me.

Jacky Over a year ago

yes working i didn't say no.In js fiddle it is working

Mamun Over a year ago

@Tom, then, I guess the issue could be somewhere else in your code in your actual environment!!!

|

Bob White · Accepted Answer · 2019-06-29 07:12:06Z

1

I hope this help you. I used javascript vanilla.

document.addEventListener('DOMContentLoaded', () => {

  document.getElementById('amount').addEventListener('input', (e) => {

    let {
      value
    } = e.target;
    let debit = document.getElementById('debit').value;

    value = value == '' ? 0 : parseFloat(value);
    debit = debit == '' ? 0 : parseFloat(debit);

    document.getElementById('debit').value = value + debit

  })

})

<input type="number" id="amount">
<input type="number" id="debit">

edited Jun 29, 2019 at 7:12

user5734311

answered Jun 29, 2019 at 6:29

Bob White

7236 silver badges22 bronze badges

4 Comments

user5734311 Over a year ago

This code has the same error as OP's (it keeps adding to debit with every keystroke).

Jacky Over a year ago

@ChrisG i posted same question now. i used the variable outside handler but for my environment the value is not take for calculation

Bob White Over a year ago

in that case there is a problem of logic. what he try to do is not the right way

Bob White Over a year ago

he could use the event focusout or a button to trigger the event.

Collectives™ on Stack Overflow

How to add the two textbox value using javascript

2 Answers 2

13 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related