Td input onchange multiply

[Heinz Stapff]

Hi everyone,
I have a table that is written from 'display' window to 'register' window. It is a CART TABLE. It is suposed to cut down on posts to the server and is written entirley with client side javascript. There should really be ony one post to the server when the clients' order is complete and the adjustable table is posted.
The cart table in 'register' window has two viewable rows and has a scrollable window in the Y plane. One fixed Header and
row[0]. All products selected from product pages in 'display' window write to the 'cartbody' in 'register' window row[0].
Columns are Code, Item, Color, Size, Price, Cost, Total and Clear.
To allow an update of the Quantity column I have written an input type text for the 'Quantity' column row named 'qty' with an onchange function called 'qtymultiply()' that should take arguments
[1,2.4,6,8,10,20] only and then multiply the 'Price' innerHTML by the new 'qty' value. This should generate a new value in 'Cost' column which adds up and writes to 'cartfoot' td 'subtotal'. Each row has an 'onmouseover' that writes the innerHTML of 'subtotal' to that rows 'Total' column.
Unfortunatley I haven't been able to get the 'qtymultiply()' function to recognize anything other than row[0] values and without enforced errors you only notice that 'subtotal' returns 0.00 and the rows 'onmouseover' sets row 'Total' to 0.00.
My javascript is mediocre at best and this problem has delayed me for two weeks. Any assistance would be greatly appreiated.
This is the script I'm using to write from Multiple form (pseudo forms as they have no submit action and only write) Product pages in 'display' to 'cartbody' in 'register'. This is the external js for all Product pages loaded to 'display'.

//product2.js

var welcome=top.frames['register'].document.getElementById('welcome');

function hidewelcome(){welcome.style.display='none';}

var trow=top.frames['register'].document.getElementsByTagName('tr');

var header=top.frames['register'].document.getElementById('header');

function fixheader(){header.style.position='fixed';}

var dumy=top.frames['register'].document.getElementById('dumy');

var scrollsound=top.document.getElementById('sound1');

window.onscroll=function(){scrollsound.Play();}

var cartbody = top.frames['register'].document.getElementById('cartbody');
var lastrow = cartbody.rows.length;
var count = lastrow;
var clientmessage = top.frames['register'].document.getElementById('clientmessage');
var insertrowsound = top.document.getElementById('sound2');
function EvalSound2(soundobj) {insertrowsound.Play();};

var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}

function changelogo(){if(document.title=='silver jewelry'){
top.document.getElementById('logo').className='silver';
}
if(document.title=='silver and gold jewelry'){
top.document.getElementById('logo').className='gold';
}
if(document.title=='silver and stones jewelry'){
top.document.getElementById('logo').className='stones';
}}

function addtocart() {
var aObj=top.frames['display'].document.getElementsByClassName('button');
for(var i=0; i<aObj.length; i++) {
    aObj[i].onclick=function() {insertItemRow(this);};
    }
};

function insertItemRow(button){
var fs=button.parentNode.parentNode;
var q=fs.getElementsByTagName('select')[2].value;
if(q!='' || q!=0) {
var code = fs.getElementsByTagName('input')[0].value;
var item = fs.getElementsByTagName('input')[1].value;
var color = fs.getElementsByTagName('select')[0].value;
var size = fs.getElementsByTagName('select')[1].value;
var price = fs.getElementsByTagName('input')[2].value;
var quantity = fs.getElementsByTagName('select')[2].value;
var val =  [[quantity],[price]];
var multiply = 0;
multiply+= (val[0]*val[1]);

var subtotal = top.frames['register'].document.getElementById('subtotal');
var itemrow=cartbody.insertRow(0); 
itemrow.setAttribute('title','Item that you have ordered.');
itemrow.onmouseover=function(){addrowsubtotal.innerHTML=subtotal.innerHTML};
itemrow.className='itemrow';

var addcode=itemrow.insertCell(0);
addcode.className='code';
addcode.appendChild(document.createTextNode(code));

var additem=itemrow.insertCell(1);
additem.className='item';

var additemlink=top.frames['register'].document.createElement('a');
additemlink.setAttribute('href','zanfeld/p'+code+'.jpg');
additemlink.setAttribute('target','display');
additemlink.setAttribute('title','Review this item then click your back button to return');
additemlink.className='itemlink';
additemlink.appendChild(document.createTextNode(item));
additem.appendChild(additemlink);

var addcolor=itemrow.insertCell(2);
addcolor.className='color';
addcolor.appendChild(document.createTextNode(color));

var addsize=itemrow.insertCell(3);
addsize.className='size';
addsize.appendChild(document.createTextNode(size));

var addprice=itemrow.insertCell(4);
addprice.className='price';
addprice.appendChild(document.createTextNode(price));

var addquantity=itemrow.insertCell(5);
addquantity.className='quantity';
//input in question
addquantity.innerHTML='<input type="text" value="'+quantity+'" title="You may change the quantity of this item" name="qty[]" class="qty" onchange="qtymultiply(this.value);"/>';

var addcost=itemrow.insertCell(6);
addcost.setAttribute('title','The cost of the quantity of this item.');
addcost.className='cost';
addcost.appendChild(document.createTextNode(multiply.toFixed(2)));

var sTotal =top.register.sumsubtotal();
var addrowsubtotal=itemrow.insertCell(7);
addrowsubtotal.setAttribute('title','Subtotal cost of your order ');
addrowsubtotal.className='col2';
addrowsubtotal.appendChild(document.createTextNode(subtotal.innerHTML));

var addclear=itemrow.insertCell(8);
addclear.setAttribute('id','clear[]');
addclear.className='clear';
addclear.setAttribute('align','center');
addclear.innerHTML='<a title="Remove this item" class="removeitem" onclick="deleterow(this);">[x]</a>';

clientmessage.innerHTML='Thank You Joe for Shopping Mexicali Rose'; window.scrollBy(0,y);

EvalSound2(insertrowsound);
}
else  {
    alert('Please enter a Quantity for this item');
	button.parentNode.parentNode.getElementsByTagName('select')[2].focus();
    }
}

function start(){hidewelcome();fixheader();changelogo();}
var alreadyrun = false;
window.onload = function() {if (alreadyrun) {return;}alreadyrun = true;start();};addtocart();

This is the external js of 'checkout.html' in 'register' window that contains the 'cartbody' within 'formcheckout'.

//checkout.js

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}

function numberFormat(nStr,prefix){var prefix = prefix || '';    
nStr += '';    
x = nStr.split('.');    
x1 = x[0];    
x2 = x.length > 1 ? '.' + x[1] : '';    
var rgx = /(\d+)(\d{3})/;    
while (rgx.test(x1))        
x1 = x1.replace(rgx, '$1' + ',' + '$2');    
return prefix + x1 + x2;}

var deletetrowsound = top.document.getElementById('sound3');

function EvalSound(soundobj) {deletetrowsound.Play();};

function numberFormat(nStr,prefix){var prefix = prefix || '';    
nStr += '';    
x = nStr.split('.');    
x1 = x[0];    
x2 = x.length > 1 ? '.' + x[1] : '';    
var rgx = /(\d+)(\d{3})/;    
while (rgx.test(x1))        
x1 = x1.replace(rgx, '$1' + ',' + '$2');    
return prefix + x1 + x2;}

function sumsubtotal(){//This works
var cartitems=document.getElementsByClassName('itemrow');
var subtotal=document.getElementById('subtotal');
var colRows=cartitems;
var sTotal=0.0;
for(var i=0; i < colRows.length; i++)
{
var oRow=colRows[i];
var oCell=oRow.cells[6];
sTotal += Number(oCell.innerHTML) || 0;
}
subtotal.innerHTML=numberFormat(parseFloat(sTotal).toFixed(2));
}

function deleterow(a) {
// remove row
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
var sTotal=sumsubtotal();
EvalSound(deletetrowsound);
}

var today = new Date();

var dateordered=document.getElementById('dateordered');
dateordered.innerHTML=today;

//function in question Dose not work
function qtymultiply(){
var cartitems=document.getElementsByClassName('itemrow');
var subtotal=document.getElementById('subtotal');
var colRows=cartitems;
var sTotal=0.0;
var multiply=0.0;
for(var i=0; i < colRows.length; i++)
{
var oRow=colRows[i];
var pCell=oRow.cells[4].innerHTML;
var mCell=oRow.cells[5].getElementsByTagName('input')[0].value; 
var cCell=oRow.cells[6].innerHTML;
multiply+=Number(pCell*mCell)||0;
sTotal += Number(cCell.innerHTML) || 0;
}
cCell.innerHTML=numberFormat(parseFloat(multiply).toFixed(2));//not showing change
//possable alert(oRow.innerHTML)???? only returns row[0] values
subtotal.innerHTML=numberFormat(parseFloat(sTotal).toFixed(2));
//returns 0.00???????????
}

Once again, any help greatly appreciated. The getElementsbyClassName works with 'sumsubtotal()' but not with
'qtymultiply()' and this might be a result of refrencing the same class 'itemrow' twice even though I've declared them localy within seperate functions, my guess is that the getElementsByClassName is global and can only refrence the class 'itemrow' once?
The getclass was supplied curtesy of Steve Chapman at About.com. Much appreciated Steve.

[Heinz Stapff]

this is getting closer but it only affects the innerHTML of the column 'Cost' in it's own row. The first row inserted at row[0]. That becomes the second last row because I have a 'dumy' row for placing client messages that is the original row[0]. As all rows are inserted to row[0] every row inserted increaments the dumy row index by one and dumy remains the cartbody rows length or last row.
When I change the 'qty' input value of the first row inserted the 'cost' cell of that row changes corectly every time. If it becomes row[3] and I scroll to it and change the 'qty' input value the 'cost' of that row changes correctly.
When I chage the 'qty' input of another row that rows 'cost' innerHTML is not changed.
The onmouseover of all itemrows changes the rowtotal td innerHTML to match the subtotal innerHTML of a footer td id=subtotal. This shows that qtymultiply() function takes into account the original values of 'qty' input for each row but not the changed values for each other rows 'qty' input value.:confused:

function qtymultiply(){
var cartitems=document.getElementsByClassName('itemrow');
var colRows=cartitems;
for(var i=0; i < colRows.length; i++)
{
var oRow=colRows[i];
var price=oRow.cells[4].innerHTML;
var qty=oRow.cells[5].getElementsByTagName('input')[0].value; 
var cost=oRow.cells[6];
var multiply=0.0;
multiply+=price*qty;
}
cost.innerHTML=multiply.toFixed(2);
sumsubtotal();
}

I'm guessing that this bit of the script is causing the situation and that I need to refrence it's parentNodes to get the correct result.

var qty=oRow.cells[5].getElementsByTagName('input')[0].value;

Any concideration would be greatly appreciated even though this explanation is awkward.