Auto calculation in a JavaScript

Question

I have a script that calculates the values in some fields in real time at the moment you type the value and it is working fine. However, if I send the values to a db and then take them back from there and populate the fields from the request from the db the fields are no longer calculated unless they are retyped in the already populated fields.

Any idea how can I do the calculation to fire up at the moment I load the populated form from the db?

This is the Jscript

<script type="text/javascript">

$(document).ready(function() {
    $('input[id=r],input[id=p]').change(function(e) {
        var total = 0;
        var $row = $(this).parent();
        var rate = $row.find('input[id=r]').val();
        var pack = $row.find('input[id=p]').val();

        total = parseFloat(rate * pack);
        //update the row total
        $row.find('.amount').text(total);

        var total_amount = 0;
        $('.amount').each(function() {
            //Get the value
            var am= $(this).text();
            console.log(am);
if (typeof console == "undefined") {
    this.console = {log: function() {}};
}
            //if it's a number add it to the total
            if (IsNumeric(am)) {
                total_amount += parseFloat(am, 10);
            }
        });
        $('.total_amount').text(total_amount);
    });
});

//isNumeric function Stolen from: 
//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric

function IsNumeric(input) {
    return (input - 0) == input && input.length > 0;
}
</script>

And this is the HTML

        <tr>
            <td></td>
            <td>
            <div>
                <input name="a2c" type="text" size="10" value="<? echo "$a2c";?>">
                <input id="r" class="rate" name="a2q" type="text" maxlength="255" size="5" value="<? echo "$a2q";?>">
                <input id="p" class="pack" name="a2p" type="text" maxlength="255" size="5" value="<? echo "$a2p";?>">
                <span class="amount"></span></div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
            <div>
                <input name="a3c" type="text" size="10" value="<? echo "$a3c";?>">
                <input id="r" class="rate" name="a3q" type="text" maxlength="255" size="5" value="<? echo "$a3q";?>">
                <input id="p" class="pack" name="a3p" type="text" maxlength="255" size="5" value="<? echo "$a3p";?>">
                <span class="amount"></span></div>
            </td>
        </tr>

score 1 · Answer 1 · answered Sep 21 '12 at 14:29

1

You can force the change event (to prevent duplication of code): http://jsfiddle.net/2vqT5/

$(".rate").change();

answered Sep 21 '12 at 14:29

Shmiddty

13,847
1
35
52

score 0 · Answer 2 · answered Sep 21 '12 at 14:25

0

$('input#r').change()

will automatically fire a change event on the input with the id of 'r'; would that suffice?

answered Sep 21 '12 at 14:25

MassivePenguin

3,701
4
24
46

Thanks, where should I put $('input#r').change() in the script ? – lStoilov Sep 21 '12 at 14:30
After you define the change() function, if you're forcing a page refresh when you bring the data in from the DB. – MassivePenguin Sep 21 '12 at 14:32

Aeveus · Accepted Answer · 2012-09-21T14:42:50.100

What you could do is to also run your function when the script loads. One way to do this is to remove the anonymous function from the .change(), and give it a name.

function yourPreviouslyAnonymousFunction() { ... }
$(document).ready(function () {
    yourPreviouslyAnonymousFunction();
    $('input[id=r],input[id=p]').change(yourPreviouslyAnonymousFunction);
});

Because your function isn't called when the page is done loading, as you inject your values using PHP. This way your function is also run once when the page is done loading, and thus the values are calculated using your function.

A different way, as you're already using jQuery, is to force the event to occur:

$(document).ready(function () {
     $('input[id=r],input[id=p]').change(function () {
         ...
         // Leave this as is
         ...
     });
     $('input[id=r],input[id=p]').change();
});

This is the way explained by MassivePenguin.

score 0 · Answer 4 · answered Sep 21 '12 at 14:27

Put all the logic into a separate function, recalculate() {...}. Make your .change() event call recalculate(), and also add code to execute on page load:

$(document).ready(function() {
    recalculate();
});

One thing that's not clear is how you are roundtripping to the database. Are you doing ajax, or are you doing a page reload? The above works for a page reload or form submit, but if you are doing ajax calls you'll have to hook into the post-submit ajax callback, and call recalculate() from there.

Auto calculation in a JavaScript

4 Answers4