How would I write this sum in Javascript

Bruce Gust
Bruce Gust used Ask the Experts™
on
I've got a dynamic list that grows or diminishes based on the number of rows a user adds. It looks like this:

<tr>
<td>
<input type='text' size='10'  class='text' name='allocated_".$i."' value='".$allocatedlist[$i]["totalcost"]."'
</td>
</tr>

I want to install a JavaScript function that adds all the values in the "allocate_$i" field. How would I do that?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Big MontyWeb Ninja at large

Commented:
for a pure javascript perspective (although this would be much easier to do in jQuery), you can do something like:

function addAllocated() {
var theForm = document.form;
var numRows = document.getElementById("tableID").rows.length;

for( var rowIndex = 0; rowIndex < numRows; rowIndex++ ) 
    total += document.getElementsByName("allocated_" + rowIndex).value;

}

Open in new window


this asusmes your table has one text box for every row, if that's not the case, you'll need to tweak the script to account for that
Bruce GustPHP Developer

Author

Commented:
Big M!

Poised on the threshold of greatness, I know it!

Here's what I coded based on your counsel:

function addAllocated(countRows) {
var theForm = document.form;
var numRows = countRows
for( var rowIndex = 0; rowIndex < numRows; rowIndex++ )
    total += document.getElementById('allocated_' + rowIndex).value;
    return total;
}

When I do an "alert(countRows)," just to makes sure my function is seeing what I hope it's seeing, I'm getting the correct number, so we're golden there.

Here's the way I'm calling my function:

<script type='text/javascript'>var allocated_total = addAllocated(".$allocatedlist["count"].")</script>

I'm not getting any kind of number.

So, what I am doing wrong and do you need more of my page to get a better picture of where I might be falling short?
Web Ninja at large
Commented:
this line

<script type='text/javascript'>var allocated_total = addAllocated(".$allocatedlist["count"].")</script>

is just creating a variableallocated_total, you're not displaying it anywhere (that I can see). you're also passing in a variable that is a string (as defined by the quotes surrounding it. no need to pass in a parameter, unless you want to apply this to multiple tables? If so, you should do it this way:

function addAllocated( tableID ) {
var numRows = document.getElementById( tableID ).rows.length;

for( var rowIndex = 0; rowIndex < numRows; rowIndex++ ) 
    total += document.getElementsByName("allocated_" + rowIndex).value;

}

return false;   //-- prevents scrolling

Open in new window


then, at the bottom of your page, you can see if it's working by doing this:
<script type='text/javascript'>var allocated_total = addAllocated("myTableID"); alert( allocated_total );</script>

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Bruce GustPHP Developer

Author

Commented:
Progress!

Check this out, though...

Every function on the page that I'm currently working on has used a convention where they're passing a variable from PHP to JavaScript using something like this:

eval('comparison = form.total_cost_comparison_'+row+'.value;');
eval('user_value = form.allocated_'+row+'.value;');

Open in new window


In other words, before there's any attempt to deploy a JavaScript functionality, the variables in question do a hand off from PHP to something that JavaScript can work with.

That said, when I do this:

alert("allocated_" + rowIndex);

I get "allocated_undefined." Do I need to do something similar to the "eval" dynamic I've got above and, if so, how would you incorporate that into your loop?
Big MontyWeb Ninja at large

Commented:
the function I gave you doesn't require any parameters, except for the ID of the table you want calculated. It takes the number of rows from that table and loops through each row in the for-loop, where it keeps a running tab of the allocated text boxes. Once the loop finishes, it returns the value through the function, so wherever you are going to use that number, you just call the function. As an example, I just put that value in a alert box.

I guess I'm not clear on what you want to do with that total once you have it.
Bruce GustPHP Developer

Author

Commented:
Fret not, sir! I got some additional input from someone in my shop and between you and them, we got it to sing!

Thanks!
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Please remember to parse form values before adding!
parseInt(value,10) or parseFloat(value)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial