Add two textbox values and display the sum in a third textbox automatically

Question

I have assigned a task to add two textbox values.I want the result of addition to appear in the 3rd textbox,as soon as enter the values in the first two textboxes,without pressing any buttons.

For eg:In the first textbox i want to enter 450,when i press digit 4 of number '450',then it will be added to the 3rd textbox,any number i press in the first two textboxes,suddenly that changes will be reflected on the third textbox.How can i do this?

Here i write my code call sum() in onkeyup

onkeyup="sum()"
function sum() {
        var txtFirstNumberValue = document.getElementById('txt1').value;
        var txtSecondNumberValue = document.getElementById('txt2').value;
        var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
        if(!isNaN(result)){
            document.getElementById('txt3').value = result;
        }
}

This is not working in chrome

What kind of error you are getting in chrome? Did you check browser console? — Dhaval Marthak
– Dhaval Marthak, Commented May 21, 2013 at 11:09
what is the output of result in chrome? Try console.log(result) — Kilian Stinson
– Kilian Stinson, Commented May 21, 2013 at 11:10
Dhaval Marthak-In chrome no result will be displayed in Third textbox.In my code the reult will display only after enter values in 2nd textbox.but i want any number i entered in any 2 texbox suddenly that change will be reflected on 3rd textbox — Monica
– Monica, Commented May 21, 2013 at 11:12
@Monica i know that what you want, but there should be something in error console of chorme. i want that error — Dhaval Marthak
– Dhaval Marthak, Commented May 21, 2013 at 11:14
Did you add the event (keyup) to both textboxes or the second one? How does you textbox markup look like? Have you checked the console of your browser for any error? — codingbiz
– codingbiz, Commented May 21, 2013 at 11:15

Qasim Javaid Khan · Accepted Answer · 2013-05-21 11:20:28Z

18

try this

  function sum() {
       var txtFirstNumberValue = document.getElementById('txt1').value;
       var txtSecondNumberValue = document.getElementById('txt2').value;
       if (txtFirstNumberValue == "")
           txtFirstNumberValue = 0;
       if (txtSecondNumberValue == "")
           txtSecondNumberValue = 0;

       var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
       if (!isNaN(result)) {
           document.getElementById('txt3').value = result;
       }
   }

answered May 21, 2013 at 11:20

Qasim Javaid Khan

6704 silver badges10 bronze badges

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

2 Comments

Ahmed Soliman Over a year ago

becareful if u use server textbox , u must use getElementById('<%=txt1.ClientID%>') instead of getElementById('txt1')

Sanghamitra Lahiri Over a year ago

I want to change the line 'var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);' to 'var result = (parseFloat(txtFirstNumberValue)/parseFloat("100")) * parseFloat(txtSecondNumberValue);' but it is not showing any result. please help

Dhaval Marthak · Accepted Answer · 2013-05-21 11:21:55Z

11

Try this: Open given fiddle in CHROME

function sum() {
      var txtFirstNumberValue = document.getElementById('txt1').value;
      var txtSecondNumberValue = document.getElementById('txt2').value;
      var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
      if (!isNaN(result)) {
         document.getElementById('txt3').value = result;
      }
}

HTML

<input type="text" id="txt1"  onkeyup="sum();" />
<input type="text" id="txt2"  onkeyup="sum();" />
<input type="text" id="txt3" />

DEMO HERE

answered May 21, 2013 at 11:21

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

3 Comments

Muhammad Bekette Over a year ago

you're answer is exactly what @monica did!! please re read the question then edit your answer

Dhaval Marthak Over a year ago

@MuhammadRamahy I have assigned a task to add two textbox values.I want the result of addition to appear in the 3rd textbox,as soon as enter the values in the first two textboxes,without pressing any buttons. and please can you explain the portion for EG:

Muhammad Bekette Over a year ago

In my code the reult will display only after enter values in 2nd textbox.but i want any number i entered in any 2 texbox suddenly that change will be reflected on 3rd textbox this was ironically reply to you but you didn't pay attention to comments

Abdennour TOUMI · Accepted Answer · 2016-11-28 16:59:11Z

2

i didn't find who made elegant answer , that's why let me say :

Array.from(
   document.querySelectorAll('#txt1,#txt2')
).map(e => parseInt(e.value) || 0) // to avoid NaN
.reduce((a, b) => a+b, 0)

window.sum= () => 
 document.getElementById('result').innerHTML=    
   Array.from(
     document.querySelectorAll('#txt1,#txt2')
   ).map(e=>parseInt(e.value)||0)
   .reduce((a,b)=>a+b,0)

<input type="text" id="txt1" onkeyup="sum()"/>
<input type="text" id="txt2" onkeyup="sum()"  style="margin-right:10px;"/><span id="result"></span>

edited Nov 28, 2016 at 16:59

answered Aug 5, 2016 at 11:02

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Comments

cat916 · Accepted Answer · 2013-05-21 11:17:10Z

0

Well, base on your code, you would put onkeyup=sum() in each text box txt1 and txt2

answered May 21, 2013 at 11:17

cat916

1,37110 silver badges18 bronze badges

2 Comments

Monica Over a year ago

i already use this.but when i enter value in txt1 only,then no result will display

cat916 Over a year ago

It means when you enter value in txt1 and no value in txt2 and you won't get the result since the value of txt2 is empty :).

Muhammad Bekette · Accepted Answer · 2013-05-21 12:13:22Z

well I think the problem solved this below code works:

function sum() {
    var result=0;
       var txtFirstNumberValue = document.getElementById('txt1').value;
       var txtSecondNumberValue = document.getElementById('txt2').value;
    if (txtFirstNumberValue !="" && txtSecondNumberValue ==""){
        result = parseInt(txtFirstNumberValue);
    }else if(txtFirstNumberValue == "" && txtSecondNumberValue != ""){
        result= parseInt(txtSecondNumberValue);
    }else if (txtSecondNumberValue != "" && txtFirstNumberValue != ""){
        result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
    }
       if (!isNaN(result)) {
           document.getElementById('txt3').value = result;
       }
   }

Shell · Accepted Answer · 2014-08-07 07:29:34Z

0

This is the correct code

function sum() 
{ 
    var txtFirstNumberValue = document.getElementById('total_fees').value; 
    var txtSecondNumberValue = document.getElementById('advance_payement').value; 
    var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue); 
    if(txtFirstNumberValue=="" ||txtSecondNumberValue=="") 
    { 
        document.getElementById('balance_payement').value = 0; 
    }
    if (!isNaN(result)) 
    { 
        document.getElementById('balance_payement').value = result;
    }
}

edited Aug 7, 2014 at 7:29

Shell

6,86911 gold badges43 silver badges75 bronze badges

answered Aug 7, 2014 at 7:08

Adnan Khan

1751 silver badge5 bronze badges

Comments

Abdallah Ghrb · Accepted Answer · 2016-08-05 11:08:58Z

0

Since eval("3+2")=5 ,you can use it as following :

byId=(id)=>document.getElementById(id); 
byId('txt3').value=eval(`${byId('txt1').value}+${byId('txt2').value}`)

By that, you don't need parseInt

answered Aug 5, 2016 at 11:08

Abdallah Ghrb

1933 silver badges13 bronze badges

Comments

ρяσѕρєя K · Accepted Answer · 2017-01-09 06:55:26Z

In below code i have done operation of sum and subtraction: because of using JavaScript if you want to call function, then you have to put your below code outside of document.ready(function{ }); and outside the script end tag.

I have taken one another script tag for this operation.And put below code between script starting tag // your code // script ending tag.

 function operation() 

 {

   var txtFirstNumberValue = parseInt(document.getElementById('basic').value);
   var txtSecondNumberValue =parseInt(document.getElementById('hra').value);
   var txtThirdNumberValue =parseInt(document.getElementById('transport').value);
   var txtFourthNumberValue =parseInt(document.getElementById('pt').value);
   var txtFiveNumberValue = parseInt(document.getElementById('pf').value);

   if (txtFirstNumberValue == "")
       txtFirstNumberValue = 0;
   if (txtSecondNumberValue == "")
       txtSecondNumberValue = 0;
   if (txtThirdNumberValue == "")
       txtThirdNumberValue = 0;
   if (txtFourthNumberValue == "")
       txtFourthNumberValue = 0;
   if (txtFiveNumberValue == "")
       txtFiveNumberValue = 0;



   var result = ((txtFirstNumberValue + txtSecondNumberValue + 
  txtThirdNumberValue) - (txtFourthNumberValue + txtFiveNumberValue));
   if (!isNaN(result)) {
       document.getElementById('total').value = result;
   }
 }

And put onkeyup="operation();" inside all 5 textboxes in your html form. This code running in both Firefox and Chrome.

Collectives™ on Stack Overflow

Add two textbox values and display the sum in a third textbox automatically

8 Answers 8

2 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related