Question

I need to write a script to calculate working hours. I have a table with 6 possible amounts of hours which need to be added together in a field at the bottom.

The HTML looks like this:

<table>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td>Total: <span id="total"></span></td>
 </tr>
</table>

I am trying to get the values of the class countAmount counted together.

I have no idea where to start with the jQuery code. Everything I tried was useless, but the main problems are how to handle the empty values and how to handle the values as an INT.

Answer 1

To find the inputs:

var inputs = $('input.countAmount');

To convert to numbers and handle blanks:

var num = parseInt($(input).val(), 10);
if (!isNaN(num)) {
    // It's a valid number, not blank, not "a" or "q", etc.
}

To loop through them, use each.

So:

var total = 0;
$('input.classAmount').each(function() {
    var num = parseInt(this.value, 10);
    if (!isNaN(num)) {
        total += num;
    }
});

…since within the loop, this will be the input, and to get the input’s value, you don’t need jQuery, the value property is fine.

Then to put it in your total span:

$("#total").text(String(total));