totaling dynamically created inputs

Question

The following can add or remove a table using click events. In the top there is a table that is not dynamically created that I have an input field called name="total_hrs" that I would like to total all the hours entered into each of the inputs name="hours' + i + '"

The current function hrsUpdate only gives me the last inputs entered value. How can that function be modified to total all of the hours inputs and reduce in value if a table is removed?

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var i = 1;

function addrow() {
    $('#mytable').before('<table><tr><td><input id="fname' + i + '" name="fname' + i + '" type="text" value=""></input></td><td><input id="lname' + i + '" name="lname' + i + '" type="text" value=""></input></td><td><input id="email' + i + '" name="email' + i + '" type="text" value=""></input></td><td><input id="hours' + i + '" name="hours' + i + '" type="text" value="" onchange="hrsUpdate(this.value)"></input></td><td><a class="remove" id="' + i + '" href="#">Remove</a></td></tr></table>');
    i++;
}

$(document).on('click', '.remove', function () {
    $(this).parents('table').remove();
});

function hrsUpdate(hrs) {
    var hours = hrs;
    alert(hours);
    document.getElementById('total_hrs').value = (hours);
}


</script>
<body>
<table>
    <tr>
        <td>
            <input type="text" value=""></input>
        </td>
        <td>
            <input type="text" value=""></input>
        </td>
        <td>
            <input type="text" value=""></input>
        </td>
        <td>
            <input id="total_hrs" name="total_hrs" type="text" value=""></input>
        </td>
    </tr>
</table>
<table id="mytable"></table>
        <a href="#" onclick="addrow()"><img src="http://www.clker.com/cliparts/2/f/6/1/11949856271997454136tasto_2_architetto_franc_01.svg.med.png" height="36" width="36" /></a>
</body>

edit:

<script>
var i = 1;

function addrow() {
    $('#mytable').before('<table><tr><td><input id="fname' + i + '" name="fname' + i + '" type="text" value=""></input></td><td><input id="lname' + i + '" name="lname' + i + '" type="text" value=""></input></td><td><input id="email' + i + '" name="email' + i + '" type="text" value=""></input></td><td><input class = "hours" id="hours' + i + '" name="hours' + i + '" type="text" value="" onchange="hrsUpdate()"></input></td><td><a class="remove" id="' + i + '" href="#">Remove</a></td></tr></table>');
    i++;
}

$(document).on('click', '.remove', function () {
    $(this).parents('table').remove();
    hrsUpdate();
});


function hrsUpdate() {
    var total_hours = 0;
    $('.hours').each(function(i, elem) {
     total_hours += parseFloat($(elem).val());
  });
  document.getElementById('total_hrs').value = (total_hours);   
}

</script>

Answer 1

Your could consider trying the following structure:

<span id="total_hours">0.00</span>
<table id="hour_records"></table>
<button id="add_row_btn">Add Row</button>

and generate table rows that look like the following:

<tr>
    <!-- You could also consider using a default value for the input -->
    <td><input type="text" value="" class="hours_entry"></td>
    <td><button class="remove_row_btn">Remove</button></td>
</tr>

JavaScript:

$(document).ready(function() {

    var handleAddRow = function(e) {
        var row = $('<tr></tr>');
        var input = $('<td></td').append('<input type="text" value="" class="hours_entry">');
            input.appendTo(row);
        var remove = $('<td></td').append('<button class="remove_row_btn">Remove</button>');
            remove.appendTo(row);
        row.appendTo('#hour_records');
    };

    var handleRemoveRow = function(e) {
        //Determine the respective row ('<tr>') object and remove it
        $(e.currentTarget).parent().parent().remove();
    };

    var updateTotalHours = function(e) {
        //Assuming that you properly validate all hour entries as numbers
        var total_hours = 0;
        $('.hours_entry').each(function(i, elem) {
            var hours = parseFloat($(elem).val());
            if(!isNaN(hours)) {
                   total_hours += parseFloat($(elem).val());
            }
        });
        $('#total_hours').text(total_hours);
    };

    //Setup the 'add row' event listener
    $('#add_row_btn').on('click', handleAddRow);
    //Setup the 'remove row' event listener
    $('#hour_records').on('click', 'button.remove_row_btn', handleRemoveRow);
    //Setup a listener to update the total hours count
    $('#hour_records').on('change', updateTotalHours);

});

Here is a jsFiddle demo that includes some very basic input validation: http://jsfiddle.net/F2hxH/10/

totaling dynamically created inputs

Question

1 answers

solution1
0 ACCPTED 2013-11-08 23:39:11

totaling dynamically created inputs

Question

1 answers

solution1 0 ACCPTED 2013-11-08 23:39:11

solution1
0 ACCPTED 2013-11-08 23:39:11