ansaurus

Question

Update calculation function to include dynamically added rows

Answer 1

A:

This is where a JavaScript framework comes in handy. If you give these elements the same class name, you can query them out of the DOM easily, loop through them, and calculate your amount. Forget about referring to specific IDs.

Diodeus 2010-01-29 21:48:50

Answer 2

+1 A:

Simplify your calcDifference to take no parameters:

<input class="txtItemAmount" name="txtItemAmount1" type="text" id="txtItemAmount1" size="10" maxlength="10" 
onKeyUp="calcDifference()">

Add these lines to your addRow function:

txtItemAmount.className = "txtItemAmount";   // Add a class you can reference later
txtItemAmount.addEventListener('keyup',calcDifference,false); // Add the key up handler

And change calcDifference() to look at all elements with class "txtItemAmount":

function calcDifference()
{   

    var txtAdjustmentAmount = parseFloat(document.getElementById('txtAdjustmentAmount').value);

    // Stores total of txtItemAmount elements
    var total = 0;

    var items = document.getElementsByClassName("txtItemAmount");

    for(var i=0; i<items.length; i++) {
        // Parse each value
        var itemVal = parseFloat(items[i].value);
        // Add it to the total if it is a legal number
        if(!isNaN(itemVal)) {
            total += itemVal;
        }
    }

    // Subtract the adjustment from the total
    document.getElementById('Difference').innerHTML = total - txtAdjustmentAmount;
}

Update:

If you want IE support, without having to rewrite or get a third-party getElementsByClassName function (http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/), you can do this:

You already track your element count in the hidden input txtIndex. You can use this to look through each element from 1-txtIndex. The problem with this is that this input can persist when you refresh the page, meaning your index will not match your page contents. What you should do is either keep a globally defined variable (such as iX) to track this information, or make sure that you reset the txtIndex on page load and use that to get each element. Assuming the latter:

Add init call to body element:

<body onload="init()">

Add init function that initializes values:

function init()
{
    document.getElementById("txtIndex").value=1;

    // You could also clear out txtAdjustmentAmount and txtItemAmount1, 
    // if you don't want these to persist after reloading the page
    document.getElementById("txtAdjustmentAmount").value="";
    document.getElementById("txtItemAmount1").value="";
}

Change calcDifference to use txtIndex and getElementById:

function calcDifference()
{   

     var txtAdjustmentAmount = parseFloat(document.getElementById('txtAdjustmentAmount').value);

     // Stores total of txtItemAmount elements
     var total = 0;

     // Retrieve index value
     var iX = document.getElementById("txtIndex").value;

     for(var i=1; i<=iX; i++) {
         // Get value:
         var item = document.getElementById("txtItemAmount"+i);
         // Parse each value
         var itemVal = parseFloat(item.value);
         // Add it to the total if it is a legal number
         if(!isNaN(itemVal)) {
             total += itemVal;
         }
     }

     // Subtract the adjustment from the total
     document.getElementById('Difference').innerHTML = total - txtAdjustmentAmount;
}

Jeff B 2010-01-29 23:12:13

Thanks! This code works beautifully in Firefox, but many of my users have IE8, and I'm reading that getElementsByClassName is not supported in IE8. I get an "object does not support this property or method" error. How can I get around this? I've tried getElementsByTagName, etc...nothing seems to be coming to mind.

baldwingrand 2010-02-01 18:05:41

@baldwingrand: See update. The update should work without using getElementsByClassName.

Jeff B 2010-02-01 22:01:29

Awesome! It's working now; I used your updated code. I did also have to change one other thing since IE doesn't support addEventListener, I put an if statement in to use attachEvent in case IE is the browser used. Works great now in both browsers. Thanks so much for your help!

baldwingrand 2010-02-02 17:08:51

ansaurus

tags:

views:

answers:

Update calculation function to include dynamically added rows

related questions