CODEWITHSUNDEEP
jqueryinput
stockBoi
stockBoi

Reputation: 287

How to sum two input fields

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?

Upvotes: 0

Views: 5117

Answers (6)

Favour Chukwuedo
Favour Chukwuedo

Reputation: 17

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>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

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>

Upvotes: 0

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18883

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

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

Upvotes: 3

Nishit Maheta
Nishit Maheta

Reputation: 6031

use psrseInt javascript function

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

Upvotes: 0

srinath madusanka
srinath madusanka

Reputation: 592

try

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

Upvotes: 1

Related Questions