Question

I could really your help! I need to sum a dynamic amount of textboxes but my JavaScript knowledge is way to week to accomplish this. Anyone could help me out? I want the function to print the sum in the p-tag named inptSum.

Here’s a function and the html code:

function InputSum() {
    ...
}

<table id="tbl">
<tbody>
    <tr>
        <td align="right">
            <span>June</span>
        </td>
        <td>
            <input name="month_0" type="text" value="0" id="month_0" onchange="InputSum()" />
        </td>
    </tr>
    <tr>
        <td align="right">
            <span>July</span>
        </td>
        <td>
            <input name="month_1" type="text" value="0" id="month_1" onchange="InputSum()" />
        </td>
    </tr>
    <tr>
        <td align="right">
            <span>August</span>
        </td>
        <td>
            <input name="month_2" type="text" value="0" id="month_2"  onchange="InputSum()" />
        </td>
    </tr>
    <tr>
        <td align="right">
            <span>September</span>
        </td>
        <td>
            <input name="month_3" type="text" value="0" id="month_3" onchange="InputSum()" />
        </td>
    </tr>
    </tbody>
</table>

<p id="inputSum"></p>

Answer 1

With a little jQuery, you could do it quite easily, using the attribute starts with selector. We then loop over them, parses their values into integers and sum them up. Something like this:

function InputSum() {
    var sum = 0;
    $('input[id^="month_"]').each(function () {
        sum += parseInt($(this).val(), 10);
    });
    $("#inputSum").text(sum);
}

You could even get rid of the onchange attributes on each input if you modify the code to something like this:

$(function () {
    var elms = $('input[id^="month_"]');
    elms.change(function() {
        var sum = 0;
        elms.each(function () {
            sum += parseInt($(this).val(), 10);
        });
        $("#inputSum").text(sum);
    });
});