Why there is a 0 in the start of the value of the last input?

Question

See this code. when I type some numbers in the .price and .qty inputs, if actually the t variable is 100, I get 0100 in the .total input. Why there is a 0 in the first and how can I solve it?

$('.detail').delegate('.quantity, .price, .discount', 'keyup', function() {
  var tr = $(this).parent().parent();
  var qty = tr.find('.quantity').val();
  var price = tr.find('.price').val();
  var amt = qty * price;
  tr.find('.amount').val(amt);
  total();
});

function total() {
  var t = 0;
  $('.amount').each(function(i, e) {
    var amt = $(this).val();
    t += amt;
  });
  $('.total').html(t);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody class="detail">
    <tr class="row">
      <td>
        <input type="text" class="no" value="1">
      </td>
      <td>
        <input type="text" class="pid">
      </td>
      <td>
        <input type="text" class="productname">
      </td>
      <td>
        <input type="text" class="price">
      </td>
      <td>
        <input type="text" class="quantity">
      </td>
      <td>
        <input type="text" class="amount">
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td><span class="total"></span></td>

    </tr>

  </tbody>
</table>

SEE THE FIDDLE: https://jsfiddle.net/z5d421at/

at first glance, this looks like it is doing string manipulation, which is why you would get a 0 + "some other info" — Fallenreaper, Sep 23 '16 at 18:45

score 2 · Answer 1 · answered Sep 23 '16 at 18:41

2

Your amount from the value is being read as a string. Use parseInt().

$('.detail').delegate('.quantity, .price, .discount', 'keyup', function() {
    var tr = $(this).parent().parent();
    var qty = tr.find('.quantity').val();
    var price = tr.find('.price').val();
    var amt = qty * price;
    tr.find('.amount').val(amt);
    total();
});

function total() {
    var t = 0;
    $('.amount').each(function(i, e) {
        var amt = parseInt($(this).val());
        t += amt;
    });
    $('.total').html(t);
}

answered Sep 23 '16 at 18:41

Jeremy Jackson

2,247
15
24

I need the elements' values as Double. So? – Tareque Md Hanif Sep 24 '16 at 18:05
You're in javascript, so I'm assuming you mean you need it to be formatted like `1.00`. You can do `parseFloat(str).toFixed(2)` – Jeremy Jackson Sep 24 '16 at 19:04

score 2 · Answer 2 · answered Sep 23 '16 at 18:41

2

An elements value is always a string, so $(this).val() returns a string, and doing "0" + "100" returns "0100" as those are strings.

You have coerce the strings to numbers

var t = 0;
$('.amount').each(function(i, e) {
    var amt = +$(this).val();
    t += amt;
});

answered Sep 23 '16 at 18:41

adeneo

312,895
29
395
388

IS THIS will return Double or Integer? – Tareque Md Hanif Sep 24 '16 at 18:05

Why there is a 0 in the start of the value of the last input?

2 Answers2