Updating input field with JQuery

Question

I have a table with inputs that are summed vertically and horizontally using JQuery. The bottom row totals the first two columns and is then supposed to sum their totals in <input type="text" name="grand_total" class="numbox_dark" readonly> input. The problem is the <input type="text" name="grand_total" class="numbox_dark" readonly> doesn't update because there is no user interaction with the "total_sales1" and "total_sales2" inputs.

The script I use looks like this:

$(window).load(function(){
    $(':input').bind('keypress keydown keyup change',function(){
        var $div = $(this).closest('tr');
        var postpaid = parseFloat($div.find(':input[name*="_postpaid"]').val(),10),
            hup = parseFloat($div.find(':input[name*="_hup"]').val(),10);

        if (isNaN(postpaid)) postpaid = 0;
        if (isNaN(hup)) hup = 0;

        var v = '';

        if (!isNaN(postpaid) && !isNaN(hup)){
            v = (postpaid + hup);
        }
        $div.find(':input[name*="_total"]').val(v.toString());
    });
});

The table looks like so:

<tr>
    <td>Category 1</td>
    <td>
        <input type="text" name="category1_sales1" class="numbox">
    </td>
    <td>
        <input type="text" name="category1_sales2" class="numbox">
    </td>
    <td>
        <input type="text" name="category1_total" class="numbox_dark" readonly>
    </td>
</tr>

<tr>
    <td>Category 2</td>
    <td>
        <input type="text" name="category2_sales1" class="numbox">
    </td>
    <td>
        <input type="text" name="category2_sales2" class="numbox">
    </td>
    <td>
        <input type="text" name="category2_total" class="numbox_dark" readonly>
    </td>
</tr>

<tr>
    <td><strong>TOTAL</strong></td>
    <td>
        <input type="text" name="total_sales1" class="numbox_dark" readonly>
    </td>
    <td>
        <input type="text" name="total_sales2" class="numbox_dark" readonly>
    </td>
    <td>
        <input type="text" name="grand_total" class="numbox_dark" readonly>
    </td>
</tr>

How do I get "grand_total" to update as entries are made on the top two rows?

all solved for you below. there were several changes/additions needed. fiddle included with working example — digitalextremist
– digitalextremist, Commented Jan 21, 2014 at 20:32

digitalextremist · Accepted Answer · 2014-01-21 20:09:26Z

Here is a jsFiddle with your answer: http://jsfiddle.net/digitalextremist/nSLpz/

You needed an updateTotals function, as shown... hastily written but very easy to optimize further:

function updateTotals() {
    var sales1 = 0
    var sales2 = 0

    $(':input[name*="_sales1"]').each(function(){
        if (isNaN(parseFloat($(this).val()))) sales1 += 0;
        else sales1 += parseFloat($(this).val())
    });

    $(':input[name*="_sales2"]').each(function(){
        if (isNaN(parseFloat($(this).val()))) sales2 += 0;
        else sales2 += parseFloat($(this).val())
    });

    $('#total_sales1').val(sales1)
    $('#total_sales2').val(sales2)

    $('#grand_total').val(sales1+sales2)
}

This is called during your bind call, at the end: updateTotals();

This also required a change to the HTML... specifically the last row:

<tr id="totals">
    <td><strong>TOTAL</strong></td>
    <td>
        <input type="text" id="total_sales1" class="numbox_dark" readonly>
    </td>
    <td>
        <input type="text" id="total_sales2" class="numbox_dark" readonly>
    </td>
    <td>
        <input type="text" id="grand_total" class="numbox_dark" readonly>
    </td>
</tr>

Collectives™ on Stack Overflow

Updating input field with JQuery

1 Answer 1

Here is a jsFiddle with your answer: http://jsfiddle.net/digitalextremist/nSLpz/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Here is a jsFiddle with your answer: http://jsfiddle.net/digitalextremist/nSLpz/

Comments

Your Answer

Sign up or log in

Post as a guest

Related