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?

Answer 1

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

Answer 2

try

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

Answer 3

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>

Answer 4

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

Answer 5

use psrseInt javascript function

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

Answer 6

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>