Generating totals of grid on load

[Mike the Canadian]

Given the code below how can I get the totals to update when the form
loads not just when a cell is changed? I tried a call to
updateColumn(el[i]) in initTable but this gives a "cell has no value"
error.

Thanks in advance.

---------

<form action="" name="ArrayOfInputs">
<table>
<tr>
<td><input type="text" name="D-0-0" value="1"></td>
<td><input type="text" name="D-1-0" value="1"></td>
<td><input type="text" name="D-2-0" value="1"></td>
</tr>
<tr>
<td><input type="text" name="D-0-1" value="2"></td>
<td><input type="text" name="D-1-1" value="2"></td>
<td><input type="text" name="D-2-1" value="2"></td>
</tr>
<tr>
<td><input type="text" name="D-0-2" value="0"></td>
<td><input type="text" name="D-1-2" value="0"></td>
<td><input type="text" name="D-2-2" value="0"></td>
</tr>
<tr>
<td><input type="text" name="D-0-t" value="0" readonly></td>
<td><input type="text" name="D-1-t" value="0" readonly></td>
<td><input type="text" name="D-2-t" value="0" readonly></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="reset"></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
<script type="text/javascript">
function initTable(){
// Attach the event to all cells in the table
// except the ones with 't' in their name
var f = document.forms['ArrayOfInputs'];
var el = f.elements;
for (var i=0, eLen=el.length; i<eLen; i++){
if (el[i].type.toLowerCase() == 'text'
&& !el[i].name.match('t') { //don't attach to totals
el[i].onchange = updateColumn;
//updateColumn(el[i]);
}
}

}

function updateColumn(e){
// Get the cell that fired the event
var e = e || window.event;
var cell = e.target || e.srcElement;
var f = cell.form;
var n = cell.name.split('-');
var j = 0;
var t;
var sum = 0;
while ( (t = f.elements[n[0]+'-'+n[1]+'-'+j]) ){

// Check content, if OK add, else prompt
if ( testNum(t.value )) {
sum -= -t.value; // Using '-' forces t to be a number
} else {
while (!testNum(t.value)) {
t.value = prompt('Entries must be a number.'
+ '\nPlease enter a new value: ');
}
}
j++;
}
f.elements[n[0]+'-'+n[1]+'-'+'t'].value = sum;

}

function testNum(x) {
return /^(\+|-)?\d+(\.)?(\d+)?$/.test(x);
}

window.onload = initTable;

</script>
_______
Trade your DVDs, movies and CDs for Free!
http://www.dvdtrades.net

[Joshie Surber]

> how can I get the totals to update when the form loads not just when a cell is

changed?

You are passing the form element to updateColumn but updateColumn is
treating it as an event object. Make update column set cell to e if e
is a form element.

[RobG]

Mike the Canadian wrote:

Given the code below how can I get the totals to update when the form
loads not just when a cell is changed? I tried a call to
updateColumn(el[i]) in initTable but this gives a "cell has no value"
error.

[...]
<script type="text/javascript">
function initTable(){
// Attach the event to all cells in the table
// except the ones with 't' in their name
var f = document.forms['ArrayOfInputs'];
var el = f.elements;
for (var i=0, eLen=el.length; i<eLen; i++){
if (el[i].type.toLowerCase() == 'text'
&& !el[i].name.match('t') { //don't attach to totals
You have a syntax error here ----^

&& !el[i].name.match('t') ) { //don't attach to totals

el[i].onchange = updateColumn;
Change this to:

el[i].onchange = function(){ updateColumn(this); };

//updateColumn(el[i]);
Uncomment the above line:

updateColumn(el[i]);
When you call the function from the onclick, because you have added a
function reference dynamically, the 'event' parameter is passed (in Geko
browsers) and nothing is passed IE, hence your use of target/srcElement.

When you call the function here, you pass a reference to the cell, but
the function isn't expecting that. The simplest solution is to attach
an anonymouse function to the onclick that passes 'this' (see above).

I have asked previously about calling the same function from events
attached dynamically and from other functions, the advice was that the
above is probably the best way. An alternative is to look at what is
passed to the function to determine how it was called and go from there,
but it's a bit messy.

}
}

}

function updateColumn(e){
// Get the cell that fired the event
var e = e || window.event;
var cell = e.target || e.srcElement;
Because you are now passing a reference to the cell, you can replace the
above with:

function updateColumn( cell ){
var f = cell.form;
var n = cell.name.split('-');

You split the name into an array, then keep concatenating it back into a
single string again. Is this still required?

[...]

--
Rob

[Joshie Surber]

Rob, thank you for clarifying... halfAsleep == halfAnswers.