How to sum two input fields

Question

I have following layout in an html table:

<table>
<tr><td>Id</td><td>Item Name</td><td>Value</td></tr>
<tr><td>1</td><td>Shampoo</td><td>200</td></tr>
<tr><td>2</td><td>Soap</td><td>20</td></tr>
<tr><td>3</td><td>Toothpaste</td><td>8</td></tr>
<tr><td></td><td>Others</td><td><input class="ta" type="text" value="" /></td></tr>
<tr><td></td><td>Total</td><td><input id="tp" type="text" value="228" /></td></tr>
</table>

Data of table rows are fetched from mysql database except 5th row (Item:Others). While page loads, value of "Total" is also fetched from mysql database. If an user put any value to "Others" row, everytime the value of "Total" should sum the user input value + value of "Total" row.

I am trying to do this by the following jquery code:

$(document).ready(function(){
$(".ta").keyup(function(){
  var vat = $(this).val();
    var total = $("#tp").val();
        total = vat+total;
    $("#tp").val(total);
});
});

However, it is not doing the sum of two value, instead it is adding the input value. i,g: If total is 5,000 and user input 50, it can't calculate total as 5050, instead it is changing total value as 505000. I think any of these two fields are evaluating as text instead digit by jquery.

What should be the right code?

Sorry, that was typing mistake. It will be class. I corrected it. But it has no effects. — stockBoi
– stockBoi, Commented Dec 2, 2014 at 5:24

Milind Anantwar · Accepted Answer · 2014-12-02 04:27:51Z

3

you need to parse those textboxes values before adding them. you will also need to modify the input element selector. ta is id of element. you should use id selector(#):

$("#ta").keyup(function(){
var vat = parseInt($(this).val());
var total = parseInt($("#tp").val());
    total = vat+total;
$("#tp").val(total);
});

edited Dec 2, 2014 at 4:27

answered Dec 2, 2014 at 4:21

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

1 Comment

stockBoi Over a year ago

Not working. What it is doing, If I put 5 in "ta" field it, firstly it removes the value of "tp" field and put 5 there, If I put another 5 (to add 55) in "ta" field, it add it before 5 (not doing sum).

srinath madusanka · Accepted Answer · 2014-12-02 04:23:32Z

1

try

$(document).ready(function(){
$("#ta").keyup(function(){
  var vat = $('#ta').val();
    var total = $("#tp").val();
        total = vat+total;
    $("#tp").val(total);
});
});

answered Dec 2, 2014 at 4:23

srinath madusanka

5927 silver badges20 bronze badges

Comments

Favour Chukwuedo · Accepted Answer · 2017-06-21 09:31:17Z

1

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>


<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
    if(parseInt(arr[i].value))
        tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}

</script>

answered Jun 21, 2017 at 9:31

Favour Chukwuedo

178 bronze badges

1 Comment

Toby Speight Over a year ago

Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

Nishit Maheta · Accepted Answer · 2014-12-02 04:24:08Z

0

use psrseInt javascript function

$(document).ready(function(){
 $("#ta").keyup(function(){
 var vat = parseInt($(this).val());
 var total = parseInt($("#tp").val());
 $("#tp").val(vat+total);
 });
});

answered Dec 2, 2014 at 4:24

Nishit Maheta

6,0413 gold badges20 silver badges32 bronze badges

Comments

Kartikeya Khosla · Accepted Answer · 2014-12-02 04:29:19Z

0

You are using class selector instead use id selector(because there is no element with class ta in your HTML structure) and use parseInt() as shown :-

$(document).ready(function(){
  $("#ta").keyup(function(){  //  <-----correct here
    var vat = parseInt( $(this).val(),10 ) || 0;  // <------use parseInt() here
    var total = parseInt( $("#tp").val(),10 ) || 0; // <------use parseInt() here
        total = vat+total;
    $("#tp").val(total);
  });
});

edited Dec 2, 2014 at 4:29

answered Dec 2, 2014 at 4:22

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Comments

Arun P Johny · Accepted Answer · 2014-12-02 05:26:47Z

0

You need to store the value of total in a variable else you will loose the original value.

Also to add the values of textfields(which are strings), you need to convert them to int(using unary plus or parseInt())

$(document).ready(function() {
  //store the initial value
  var total = +$("#tp").val() || 0;
  $("#ta").keyup(function() {
    var vat = +$(this).val() || 0;
    $("#tp").val(vat + total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Id</td>
    <td>Item Name</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Shampoo</td>
    <td>200</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Soap</td>
    <td>20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Toothpaste</td>
    <td>8</td>
  </tr>
  <tr>
    <td></td>
    <td>Others</td>
    <td>
      <input id="ta" type="text" value="" />
    </td>
  </tr>
  <tr>
    <td></td>
    <td>Total</td>
    <td>
      <input id="tp" type="text" value="228" />
    </td>
  </tr>
</table>

edited Dec 2, 2014 at 5:26

answered Dec 2, 2014 at 4:27

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

stockBoi Over a year ago

I found why it is not working incase of me. Actually the initial value fetched from database in "#tp" has delimeter (,). So it can't do sum, instead it is just coping the "#ta" value to "#tp" value. How to resolve it. (n.b: it will be better if resulting summation has also a delimeter after keyup). I have added a delimeter in your code and look your jquery is not working properly.

Collectives™ on Stack Overflow

How to sum two input fields

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related