Adding Multiple Inputs Not Working Using Jquery

Question

I have a simple issue that I might just not be thinking through. I am trying to add together several input fields (which are all formatted numbers like 2.00, 3.00, etc.).

But using the following script:

 var sum = parseFloat(0).toFixed(2);
    //using an iterator find and sum the values of checked checkboxes
    $(".amountCheckbox:checked").each(function() {
        var input = parseFloat($(this).closest('tr').find('.amountInput').val());
        console.log(input.toFixed(2));
      sum += input.toFixed(2);
      console.log(sum);
    });
    return sum;

It returns as 02.003.00 rather than 5.00. I would appreciate any help. Thanks!

toFixed() returns a string, so you're just doing string concatenation — Tieson T.
– Tieson T., Commented Sep 3, 2020 at 20:44
Remove all .toFixed() from your code and just add it once with return like return sum.toFixed(), it will solve your problem. — Karan
– Karan, Commented Sep 4, 2020 at 4:24

PeterKA · Accepted Answer · 2020-09-04 04:06:20Z

As already indicated Number.toFixed() returns a string so + concatenates rather than add the numbers. Give the Array#reduce() method a try:

return $(".amountCheckbox:checked").closest('tr').find('.amountInput')
.map((index,input) => +input.value).get()
.reduce((acc, cur) => acc + cur, 0);

DEMO

$(':checkbox').on('change', function() {
    const sum = $(".amountCheckbox:checked")
    .closest('tr').find('.amountInput')
    .map((index,input) => +input.value).get()
    .reduce((acc, cur) => acc + cur, 0);
    
    console.log( sum.toFixed(2) );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td><input type="text" class="amountInput" value="2.00"></td>
      <td><input type="checkbox" class="amountCheckbox"></td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td><input type="text" class="amountInput" value="5.00"></td>
      <td><input type="checkbox" class="amountCheckbox"></td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td><input type="text" class="amountInput" value="1.00"></td>
      <td><input type="checkbox" class="amountCheckbox"></td>
    </tr>
    <tr>
      <td>Row 4</td>
      <td><input type="text" class="amountInput" value="2.20"></td>
      <td><input type="checkbox" class="amountCheckbox"></td>
    </tr>
  </tbody>
</table>

Brenden · Accepted Answer · 2020-09-03 20:44:52Z

0

ToFixed will convert the value to a string, so you are just concatenating.

I think what you want to do is sum up all the values before calling toFixed and call toFixed after to format the value as a fixed precision value.

 var sum = 0;

    //using an iterator find and sum the values of checked checkboxes
    $(".amountCheckbox:checked").each(function() {
        var input = parseFloat($(this).closest('tr').find('.amountInput').val());
        console.log(input.toFixed(2));
      sum += input;
      console.log(sum);
    });
    return sum.toFixed(2);

answered Sep 3, 2020 at 20:44

Brenden

2,0971 gold badge13 silver badges10 bronze badges

Comments

Carsten Massmann · Accepted Answer · 2020-09-03 21:20:30Z

Maybe something like this?

$('table').on('change input','input',ev=>{
 $('#res').text($(".amountCheckbox:checked").get().reduce((a,c)=>
   +$(c).closest('tr').find('.amountInput').val()+a, 0).toFixed(2))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td><input type="checkbox" class="amountCheckbox"></td><td>A</td>
<td><input value="1.2345" class="amountInput"></td></tr>
<tr><td><input type="checkbox" class="amountCheckbox"></td><td>B</td>
<td><input value="13.114" class="amountInput"></td></tr>
<tr><td><input type="checkbox" class="amountCheckbox"></td><td>C</td>
<td><input value="3.6345" class="amountInput"></td></tr>
</table>
<br>total: <span id="res"></span>

The summation happens in the .reduce() function and is done over all table rows where the checkbox is checked. Each input value is converted to float by applying the unary operator +. The summation result is then rounded and converted to a string again in .toString(2).

bensiu · Accepted Answer · 2020-09-04 15:55:22Z

0

var sum = 0;
//using an iterator find and sum the values of checked checkboxes
$(".amountCheckbox:checked").each(function() {
  var input = parseFloat($(this).closest('tr').find('.amountInput').val());
  console.log(input.toFixed(2));
  sum += input;
  console.log(sum);
});
return sum.toFixed(2);

toFixed() would return string not numeric value.

edited Sep 4, 2020 at 15:55

answered Sep 3, 2020 at 20:51

bensiu

25.7k56 gold badges81 silver badges117 bronze badges

1 Comment

Karan Over a year ago

As var sum = parseFloat(0).toFixed(2); at first line so sum will be string, so sum += input will be string concatenation & it will return incorrect result.

Collectives™ on Stack Overflow

Adding Multiple Inputs Not Working Using Jquery

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related