Javascript: Add multiple fields together and insert into Totals column on Form

Question

I am new to javascript and am making a basic HTML timesheet form. I am simply trying to add the various hour types (Regular, overtime, sick, etc.) together and put that calculated value into a "Total hours" text box. Here is my function that I attempted (I am only using the 1 text box for now but would like advice on how to incorporate the others):

<script>
    function findTotal(hours, tot) {
        var hours = document.getElementsbyID('hours1').value;
        var tot = 0;
        for (var i = 0; i < hours.length; i++) {
            if (parseInt(hours[i].value))
                tot += parseInt(hours[i].value);
        }
        document.getElementById('total').value = tot;
    }
</script>

Here is the corresponding HTML form section:

<b>HOURS</b>
<table width="25%" border="1" cellpadding="0" cellspacing="0" style="background-color: #ffffff;">
    <tr valign="Top">
        <td style="border-width : 0px;">
            <br /><b>Regular</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal(hours)" id="hours1" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Overtime</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours2" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Sick</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours3" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Holiday</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours4" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Vacation</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours5" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Leave</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours6" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>Jury Duty</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" id="hours7" size="5">
        </td>
    </tr>
    <tr valign="top">
        <td style="border-width : 0px;">
            <br /><b>TOTAL HOURS</b>
        </td>
        <td style="border-width : 0px;">
            <br />
            <input type="text" onblur="findTotal()" size="5" id="total">
        </td>
    </tr>
</table>

Thank you in advance for your help!

-Matt

Answer 1

If you do the same things many times, think about how you could do it generically with CSS (selector) or JavaScript (loop).

Cleaned up HTML:

<b>HOURS</b>

<table id="myTable" width="25%">
    <tr valign="top">
        <td>Regular</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Overtime</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Sick</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Holiday</td>
        <td>
            <input type="text" id="hours4" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Vacation

        </td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Leave</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>Jury Duty</td>
        <td>
            <input type="text" size="5" />
        </td>
    </tr>
    <tr valign="top">
        <td>TOTAL HOURS</td>
        <td>
            <input type="text" size="5" id="total" />
        </td>
    </tr>
</table>

It is good pratice to separate JavaScript and HTML. If you work with HTML and JavaScript, it's good to understand how you could access, e.g here the table, without class (getElementsByClassName) and without id (getElementById).

Go through the table rows in the table. Therefore there are rows and cells:

var table = document.getElementById("myTable");
var rows = table.rows;
var rowsLength = rows.length // the number of all rows in the table

Example first row first cell:

var firstRowFirstCell = rows[0].cells[0];

Here, we go through the rows without the last row (total) rowsLength - 1. The input is in the second cell. Therefore we need document.getElementsByTagName

var input = rows[i].cells[1].getElementsByTagName("input");

to add addEventListener:

input[0].addEventListener("blur", function() { ... });

for every input except total (the last one). Assign

function totalHours(containerID) {
    var table = document.getElementById(containerID);
    var rows = table.rows;
    var rowsLength = rows.length;
    var total = 0;
    for(var i = 0; i < (rowsLength - 1); i += 1) { // not the TOTAL input!
        var input = rows[i].cells[1].getElementsByTagName("input");
        if(input[0].value !== "") { // no empty inputs
            total += parseInt(input[0].value); 
        }        
    }
    return total;
}

to them.

Full example