/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Td input onchange multiply

Copy linkTweet thisAlerts:
Jan 20.2010

I have a site that writes a checkout table/cart from one window to another. Just to be current I’ve decided to allow the customer to change the quantity of the item ordered by putting an input type text in each rows ‘quantity’ column. The idea is that they can change the number of that rows particular item they wish to order. The onchange of the input element should multiply the new ‘quantity’ value by the ‘cost’ innerHTML of the cost column and then set the ‘subtotal’ innerHTML in the footer row to match. An ‘onmouseover’ changes the ‘rowsubtotal’ to match the footer ‘subtotal’ innerHTML.:rolleyes:
Unfortunatley the ‘qtymultipl()’ function called by input onchange only results with ‘onmouseover’ changing the ‘rowsubtotal’ and footer ‘subtotal’ to 0.00.
I have learnt quite a bit about javascript on this site but I could really use some help with these functions. They have got me stumped.

[B]EXTERNAL JS OF ‘DISPLAY’ WINDOW PRODUCT PAGE.[/B]

[CODE]
//part of insert row
var addquantity=itemrow.insertCell(5);
addquantity.setAttribute(‘id’,’quantity’+count);
addquantity.className=’quantity’;
addquantity.innerHTML='<input type=”text” value=”‘+quantity+'” title=”You may change the quantity of this item” id=”qty’+count+'” name=”qty[]” class=”qty” onchange=”qtymultiply(this.value);”/>’;
[/CODE]

[B]EXTERNAL JS OF ‘REGISTER’ WINDOW CARTABLE PAGE.[/B]

[CODE]
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].input.value;
var cCell=oRow.cells[6].innerHTML;
multiply+=Number(pCell*mCell)||0;
sTotal += Number(cCell.innerHTML) || 0;
}
cCell.innerHTML=numberFormat(parseFloat(multiply).toFixed(2));
subtotal.innerHTML=numberFormat(parseFloat(sTotal).toFixed(2));
}
[/CODE]

I have seen quite a few input onchange functions that re sum the table but none that multiply and sum the table. I’m guessing that the ‘qtymultiply()’ function isn’t grabing the new value as anything other than zero as ‘subtotal’ and ‘rowsubtotals’ return 0.00
Thanks for any Help in advance?
Also, rather than use an options box for ‘qty[]’ I also need an if statement that calls an alert if the numbers aren’t [1,2,4,6,8,10,20]

to post a comment
JavaScript

17 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 20.2010 — [I]getElementsByClassName[/I] won't work in IE

Not: [I]var mCell=oRow.cells[5].input.value;[/I]

use: [I]var mCell=oRow.cells[5].getElementsByTagName('input')[0].value;[/I]
Copy linkTweet thisAlerts:
@THEFOOLauthorJan 21.2010 — [B][U][COLOR="Red"]Fang[/COLOR][/U][/B] thanks for the quick response. Used the getElementsByTagName but the 'subtotal' still returns 0.00

It must be something to do with multiply+= number( etc.
Copy linkTweet thisAlerts:
@FangJan 21.2010 — Have you checked the values returned by the cells?
Copy linkTweet thisAlerts:
@THEFOOLauthorJan 21.2010 — Yeh [B][U][COLOR="Red"]Fang[/COLOR][/U][/B] couldn't get back to you last night the 'subtotal' in the footer returns 0.00 with input onchange and the 'itemrows' onmouseover turns all the 'rowsubtotals' to 0.00 copying the footer 'subtotal'. I got to try to alert the cost value something like aler(cCell) cCell being the 'cost' cell that is supposed to be changed by 'qtymultiply()' and it dosen't seem to change cCell innerHTML

[B][U]AS IS NOW[/U][/B]
<i>
</i>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 &lt; 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(cCell.innerHTML)????
subtotal.innerHTML=numberFormat(parseFloat(sTotal).toFixed(2));
}
Copy linkTweet thisAlerts:
@THEFOOLauthorJan 21.2010 — [B][U][COLOR="Red"]Fang[/COLOR][/U][/B] yeh the alert tells me that 'cCell' is 'undefined' / cost.innerHTML. So maybe it is 'multiply+=Number(pCell*mCell)||0;' Some syntax error?
Copy linkTweet thisAlerts:
@THEFOOLauthorJan 21.2010 — [B][U][COLOR="Red"]Fang[/COLOR][/U][/B] wow took out innerHTML from cCell.innerHTML like this
[CODE]
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;
}
[COLOR="Red"]cCell.[COLOR="Black"]innerHTML[/COLOR]=numberFormat(parseFloat(multiply).toFixed(2));
alert(cCell);[/COLOR]
subtotal.innerHTML=numberFormat(parseFloat(sTotal).toFixed(2));
}
[/CODE]

Wierd science, the maths is wrong on the alert and the actual cCell innerHTML dosen't change. The 'itemrow' onmouseover turns 'rowsubtotal' to 0.00 Got to check the footer 'subtotal'.?

[B][U]IT'S NOT MULTIPLYING THE NEW VALUE??[/U][/B] The 'cost/cCell innerHTML remains the same??????????
Copy linkTweet thisAlerts:
@THEFOOLauthorJan 24.2010 — [B][U][COLOR="Red"]Fang[/COLOR][/U][/B]

This script returns only the values of row[0] and ignores the index or [i] of 'oRow' ?

[CODE]
function qtymultiply(){
var cartitems=document.getElementsByClassName('itemrow');
var subtotal=document.getElementById('subtotal');
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].innerHTML;

}
alert(oRow.innerHTML);
}
[/CODE]
Copy linkTweet thisAlerts:
@FangJan 25.2010 — getElementsByClassName does not work in IE
Copy linkTweet thisAlerts:
@THEFOOLauthorJan 25.2010 — [B][U][COLOR="Red"]Fang[/COLOR][/U][/B] not quite true. I've been using this 'getElementsByClassName' curtacey of Steve Chapman at About.com and it works on the 'sumsubtotal()' function as shown below though it may be due to the double use of the ClassName 'itemrow' ?

[CODE]
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;
}//this works

function sumsubtotal(){
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));
}//as this is still working

function qtymultiply(){
var cartitems=document.getElementsByClassName('itemrow');
var subtotal=document.getElementById('subtotal');
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].innerHTML;

}
alert(oRow.innerHTML);
}//this on same external js of 'register/cart' as above only returns row[0]
[/CODE]

:o Thanks for any Help. Maybe var cartitems should be declared globaly once?
Copy linkTweet thisAlerts:
@THEFOOLauthorFeb 02.2010 — [B][COLOR="Red"][U]Fang[/U][/COLOR][/B]

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.?
[CODE]
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();
}
[/CODE]

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.
[CODE]
var qty=oRow.cells[5].getElementsByTagName('input')[0].value;
[/CODE]

Any concideration would be greatly appreciated even though this explanation is awkward.
Copy linkTweet thisAlerts:
@FangFeb 02.2010 — How are the new rows being inserted and how are the events added?
Copy linkTweet thisAlerts:
@THEFOOLauthorFeb 02.2010 — [B][U][COLOR="Red"]Fang[/COLOR][/U][/B]

Just like the first post in this thread except I took out the name and id+count for each element created in insertrow because they are inserted at row[0] and don't increment the id's or names like 'qty', 'qty1', 'qty2' etc. they just produce 'qty1', 'qty1', and 'qty1' etc. using +count itteration of lastrow. I changed the 'qty' name to name='qty[]' for server array.

Each element created with insertrow has a function refering to the external js of the 'register' window document that holds the cartbody table that the rows are writen to.

I couldn't figure out how to increment the id's and names when inserting to row[0] though that could very well simplify the task of matching 'price1' to 'cost1' etc. instead of getting the input.parentNode.parentNode to refrence the specific row?
Copy linkTweet thisAlerts:
@THEFOOLauthorFeb 02.2010 — [B]EXTERNAL JS OF 'DISPLAY' WINDOW PRODUCT PAGE.[/B]

[CODE]
//insertrow portion only
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';
[COLOR="Red"]//relavent onchange[/COLOR]
addquantity.innerHTML='<input type="text" value="'+quantity+'" title="You may change the quantity of this item" name="qty[]" class="qty" [COLOR="Red"]onchange[/COLOR]="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();
}
}
[/CODE]

[B]EXTERNAL JS OF 'REGISTER' WINDOW CARTABLE PAGE.[/B]

[CODE]
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();
}
[/CODE]
Copy linkTweet thisAlerts:
@FangFeb 03.2010 — // Why?
var val = [[quantity],[price]];
var multiply = 0;
multiply+= (val[0]*val[1]);

var multiply = quantity * price;

Undefined?var itemrow=[COLOR="Red"]cartbody[/COLOR].insertRow(0);

itemrow.onmouseover=function(){[COLOR="Red"]addrowsubtotal[/COLOR].innerHTML=subtotal.innerHTML};
What errors are appearing in the Error Console.

Are the inserted elements appearing correctly in the generated source(Check in Fx & IE)
Copy linkTweet thisAlerts:
@THEFOOLauthorFeb 03.2010 — [B][U][COLOR="Red"]Fang[/COLOR][/U][/B]

Good Questions??????????

1.Because it works? Also dosen't affect the qtymultiply() onchange function but actually loads the original product page forms 'quantity' input value relative to the form button clicked? When I tried

'var multiply = quantity * price;' it didn't work? [COLOR="Red"]will try again[/COLOR]

2.In IE8 I get no errors and the onmouseover of itemrow[i] actually gets the footer td 'subtotal.innerHTML' and writes it to the

itemrow[i].rowtotal.innerHTML. Again, it works in IE8 STANDARD MODE.

[COLOR="Red"]will try 'additemrow.onmouseover.function(){sumsubtotal(this.value);}[/COLOR]





Currently I can't test it in FX though IE8 seems to emulate Moz?:o

If you see the screen shot the qty was changed in the 5th inserted row but it hasen't altered the cost in the same row but has been added to the 'subtotal' as the original value of 20 which is why the rowtotal shows up high not x 4 the new value of that rows 'qty'. The first row inserted is the only one that acts corectly no matter what index it is in which will always be lastrow -1.



[upl-file uuid=dfa8bd98-524f-4d52-a67f-2ee41d22b378 size=65kB]screenshot.JPG[/upl-file]
Copy linkTweet thisAlerts:
@THEFOOLauthorFeb 03.2010 — // Why?
var val = [[quantity],[price]];
var multiply = 0;
multiply+= (val[0]*val[1]);

var multiply = quantity * price;

Undefined?var itemrow=[COLOR=red]cartbody[/COLOR].insertRow(0);

itemrow.onmouseover=function(){[COLOR=red]addrowsubtotal[/COLOR].innerHTML=subtotal.innerHTML};
What errors are appearing in the Error Console.

Are the inserted elements appearing correctly in the generated source(Check in Fx & IE)[/quote]

Concerning
<i>
</i>var itemrow=[COLOR=red]cartbody[/COLOR].insertRow(0);
itemrow.onmouseover=function(){[COLOR=red]addrowsubtotal[/COLOR].innerHTML=subtotal.innerHTML};
[code]
This works and is a little more clear as to what is supposed to happen
[code]itemrow.onmouseover=function(){itemrow.cells[7].innerHTML=subtotal.innerHTML};
Unfortunatley when the client clicks on the 'item' link in item column and that items image is shown in 'display' when they return by clicking the back button to the product page in 'display' the onmouseover of 'itemrow' no longer resets the 'addrowsubtotal.innerHTML to match 'subtotal.innerHTML' no matter which syntax is used. The itemrow onmouseover should probably refrence a function in 'register' external js that does the same thing from the source of the table itself?

I'm thinking a 'resetrowsubtotal()' function in the 'checkout.js'
Copy linkTweet thisAlerts:
@THEFOOLauthorFeb 06.2010 — [B]I resolved this issue Myself[/B]

[B]Many thanks to [/B][COLOR=red][B][U]FANG[/U][/B][/COLOR][COLOR=black] [B]For previous lessons on add/attach events.[/B][/COLOR]

[B][U]Add row in 'display' window 'Product.html' external js.[/U][/B]
<i>
</i>//relavent part
var addquantity=itemrow.insertCell(5);
addquantity.className='quantity';
addquantity.innerHTML='&lt;input type="text" value="'+quantity+'" title="You may change the quantity of this item" name="qty[]" class="qty" [COLOR=red]onkeydown="itemrowMultiply(this.value);"[/COLOR] /&gt;';

[B][U]'itemrowMultiply()' in 'register' window 'Checkout.html' external js.[/U][/B]<i>
</i>//relevant part
function itemrowMultiply() {
var aObj=document.getElementsByClassName('qty');
for(var i=0; i&lt;aObj.length; i++) {
aObj[i].onchange=function() {qtymultiply(this);};
}
};
function qtymultiply(qty){
var fs=qty.parentNode.parentNode;
var subtotal=document.getElementById('subtotal');
var args=[0,1,2,4,6,8,10,20];
var multiply=0.0;
var price=fs.cells[4].innerHTML;
var quantity=fs.cells[5].getElementsByTagName('input')[0].value;
var cost=fs.cells[6];
var rowsubtotal=fs.cells[7];
if(qty.value!=''||qty.value!=0||qty.value.isNaN){
//need if qty.value dosen't match(args) to cause alert
multiply+=price*quantity;
cost.innerHTML=parseFloat(multiply).toFixed(2);
sumsubtotal();
rowsubtotal.innerHTML=subtotal.innerHTML;
}
else {
alert('You only have these options: 1,2,4,6,8,10 or 20');
qty.focus;
}
}

This works but I'd like to get the alert to run when the new value entered in the inputs dose not match the elements in 'args' array. Any help would be greatly appreciated.:mad:
×

Success!

Help @THEFOOL spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...