www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 53

Thread: Onclick createelement insertrow

  1. #1
    Join Date
    Nov 2009
    Posts
    268

    Onclick createelement insertrow

    HEY GUYS,
    I'M WORKING ON SOMETHING WITH MULTIPLE FORMS IN 'DISPLAY' FRAME INSERTING ROW TO 'CARTBODY' IN 'REGISTER' FRAME. THE SCRIPT IS RUNNING FROM A SEPERATE JS FILE LINKED TO THE DOCUMENT IN THE 'DISPLAY' FRAME. SOME HOW I'M NOT GETTING THE VALUES FROM THE 'CARTITEM' FORM TO APPEAR IN THE ROW. THE ROW SHOWS UP IN THE 'REGISTER' FRAME BUT MINUS THE TD DATA.

    Code:
    function addtocart(cartbody, cells){
    var carttable = top.frames['register'].document.getElementById('carttable');
    var cartbody = top.frames['register'].document.getElementById('cartbody');
    var cartitems=document.getElementsByClassName('cartitem');
    for(var i = 0; i <cartitems.length; i++)
    var cartitem=cartitems[i].elements.length;
    
    var itemrow=top.frames['register'].document.createElement('tr');
    itemrow.setAttribute('id','itemrow');
    itemrow.setAttribute('className','itemrow');
    
    var addcode=top.frames['register'].document.createElement('td');
    addcode.setAttribute('id','code');
    addcode.setAttribute('colspan','1');
    addcode.setAttribute('value','this.cartitem.code.value');
    
    var additem=top.frames['register'].document.createElement('td');
    additem.setAttribute('id','item');
    additem.setAttribute('colspan','1');
    additem.setAttribute('value','this.cartitem.item.value');
    
    var addcolor=top.frames['register'].document.createElement('td');
    addcolor.setAttribute('id','color');
    addcolor.setAttribute('colspan','1');
    addcolor.setAttribute('value','this.cartitem.color.value');
    
    var addsize=top.frames['register'].document.createElement('td');
    addsize.setAttribute('id','size');
    addsize.setAttribute('colspan','1');
    addsize.setAttribute('value','this.cartitem.size.value');
    
    var addprice=top.frames['register'].document.createElement('td');
    addprice.setAttribute('id','price');
    addprice.setAttribute('className','price');
    addsize.setAttribute('colspan','1');
    addprice.setAttribute('value','this.cartitem.price.value');
    
    var addquantity=top.frames['register'].document.createElement('td');
    addquantity.setAttribute('id','quantity');
    addquantity.setAttribute('className','quantity');
    addquantity.setAttribute('colspan','1');
    addquantity.setAttribute('value','this.cartitem.quantity.value');
    
    var addcost=top.frames['register'].document.createElement('td');
    addcost.setAttribute('id','cost');
    addcost.setAttribute('className','cost');
    addcost.setAttribute('colspan','1');
    addcost.setAttribute('value','this.cartitem.quantity.value*this.cartitem.price.value');
    addcost.setAttribute('value','toFixed(2)');
    
    var addtotal=top.frames['register'].document.createElement('td');
    addtotal.setAttribute('id','total');
    addtotal.setAttribute('className','col2');
    addtotal.setAttribute('colspan','1');
    addtotal.setAttribute('value','subtotal.value');
    addtotal.setAttribute('value','toFixed(2)');
    
    var addclear=top.frames['register'].document.createElement('td');
    addclear.setAttribute('id','clear');
    addclear.setAttribute('colsan','1');
    addclear.setAttribute('align','center');
    
    var addremoveitem=top.frames['register'].document.createElement('a');
    addremoveitem.setAttribute('id','removeitem');
    addremoveitem.setAttribute('className','removeitem');
    addremoveitem.setAttribute('title','Remove this item');
    addremoveitem.setAttribute('innerTEXT','[x]');
    
    addclear.appendChild(addremoveitem);
    
    itemrow.appendChild(addcode);
    itemrow.appendChild(additem);
    itemrow.appendChild(addcolor);
    itemrow.appendChild(addsize);
    itemrow.appendChild(addprice);
    itemrow.appendChild(addquantity);
    itemrow.appendChild(addcost);
    itemrow.appendChild(addtotal);
    itemrow.appendChild(addclear);
    cartbody.appendChild(itemrow);
    }

    NO HECKLING FROM THE PEANUT GALLERY PLEASE. I'M GUESSING YOU CAN TELL MY JS IS HORRIFIC AND I'VE BEEN WORKING ON THIS FOR TWO MONTHSSSSSS!
    ANY ASSISTANCE WILL BE GREATLY APPRECIATED

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The innerText does not work.
    Code:
    //DOM method
    addremoveitem.appendChild(document.createTextNode('[x]'));
    //or
    addremoveitem.innerHTML='[x]';
    Also the class will not always be applied correctly.
    Code:
    //not this
    addtotal.setAttribute('className','col2');
    //use
    addtotal.className='col2';
    Adding a value
    Code:
    //not this
    addtotal.setAttribute('value','subtotal.value');
    addtotal.setAttribute('value','toFixed(2)');
    //use
    addtotal.setAttribute('value', subtotal.value.toFixed(2));
    No need to shout in your postings
    Last edited by Fang; 11-18-2009 at 02:18 AM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Welcome to the Forum! Yet I must welcome you with an observation: there is no need to write with full uppercase words. It is hard to read. We're not blind.

    Now your problem. At a first glance you should know that there are differences between browsers in DOM methods implementation.
    1. getElementsByClassName() was not implemented in IE7 (nor in IE6, of course). You should probably use a workaround like:
    Code:
    function setClassMethod(){
    if (!document.getElementsByClassName) {
    	document.getElementsByClassName = function (cn) { 
    		var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
    		var allT = document.getElementsByTagName("*"), allCN = [], ac="", i = 0, a;
    			while (a = allT[i=i+1]) {
    			  ac=a.className;
    			  if ( ac && ac.indexOf(cn) !==-1) {
    				if(ac===cn){ allCN[allCN.length] = a; continue;   }
    				rx.test(ac) ? (allCN[allCN.length] = a) : 0;
    			  }
    			}
    		return allCN;
    	}
    }
    }
    onload=setClassMethod;
    2. class is treated different in different browsers, thus using setAttribute() is to be avoided. better a DOM0 classical approach:
    Code:
    element.className='someclass';
    3. IE needs camelcase in case of compunded attributes. Thus:
    Code:
    addcost.setAttribute('colSpan','1');
    Even so - I wonder: what is the use to set a colspan which value is 1? That is the default value anyway.

    But the most important thing is that you don't sense the HTML language. Nor JavaScript. For instance, I don't understand what is this:
    Code:
    var addcode=top.frames['register'].document.createElement('td');
    ...
    ...
    addcode.setAttribute('value','this.cartitem.code.value');
    A cell can not have a value attribute. And what is that : 'this.cartitem.code.value'? this should be the reference of the element on which a function or a method is applied. But there is no function, no method, no event and, after all, that is nothing but a string, not a javascript reference or expression.

    Or this one:
    Code:
    addcost.setAttribute('value','toFixed(2)');
    to fixed what?

    I guess you should learn HTML and JavaScript starting from the basis. For the moment you are far from understating those languages.
    Last edited by Kor; 11-18-2009 at 02:59 AM.

  4. #4
    Join Date
    Nov 2009
    Posts
    268

    Thanks

    Thanks Fang and Khor for the great response.
    1. 1. The className has been changed and works.
      2. The remove item append child text node works. Many Thanks.
      3. I already have a getElements By Class function curtesy of Chris Chapman that works and is at the top of the external JS file Many Thanks.
      4.The 'top frames register is set to create the elements in the register window from the display window. I'm not sure whether this is necessary or that it only has to be ussed to append to cartbody in the register window.

    5.The this cartitem color value is my endeavour to obtain the value of the current form element named color which still dosen't return a value. Nor do the others with the same syntax and this is the biggest issue.
    6. I have spent the last 6 years trying to create a website and educate myself as a wheelbarrow pusher wanabe site designer. I have read from begining to end many times: HTML&XHTML the complete refrence, JAVASCRIPT the definitive guide, DYNAMIC HTML the definitive refrence and last but not least, ASP. NET unleashed. I might not be the sharpest knife in the draw but what I lack in IQ I am determed to make up with diligence.

    This is the form that 'the this cartitem color value' is trying to refrence. There are 13 such forms on the same page in the 'display' frame. They are named cartitem, cartitem1, cartitem2 etc. This is only one Product page that loads in 'display'. There are many more.

    HTML Code:
    <div class="ordercell">
    <form id="cartitem" name="cartitem" class="cartitem">
    <fieldset id="addtocart">
    <br/>
    <label for="quantity">Quantity:</label>
    <select name="quantity" id="quantity" class="quantity" size="1" align="right">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10" title="5% discount!">10</option>
    </select>
    <br/>
    <br/>
    <label for="size">Size:</label>
    <select name="size" id="size" class="size" size="1" align="right">
    <option selected="selected" value="16&quot;">16&quot;</option>
    <option disabled="disabled">14&quot;</option>
    <option disabled="disabled">18&quot;</option>
    </select>
    <br/>
    <br/>
    <label for="color">Color:</label>
    <select name="color" id="color" class="color" size="1" align="right">
    <option selected="selected" value="Silver">Silver</option>
    <option disabled="disabled"></option>
    <option disabled="disabled"></option>
    </select>
    <br/>
    <br/>
    <input id="code" name="code" type="hidden" value="230"/>
    <input id="item" name="item" type="hidden" value="Antiqued Silver Braid"/>
    <input id="price" name="price" type="hidden" value="158.30"/>
    <div id="buttoncontainer"><span class="price">158.30</span>
    <input name="buynow" id="buynow" class="button" type="button" value="Buy Now!"/>
    </div>
    <!--end of #buttoncontainer-->
    </fieldset>
    </form>
    </div>
    The updated code:
    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;
    }
    
    function scrollregister(){top.frames['register'].scrollBy(0,22);}
    
    function addEvent(el, eType, fn, uC) {
    if (el.addEventListener) {
    el.addEventListener(eType, fn, uC);
    return true;
    } else if (el.attachEvent) {
    return el.attachEvent('on' + eType, fn);
    }
    }  
    
    function addtocart(cartbody, cells){
    var carttable = top.frames['register'].document.getElementById('carttable');
    var cartbody = top.frames['register'].document.getElementById('cartbody');
    var cartitems=document.getElementsByClassName('cartitem');
    for(var i = 0; i <cartitems.length; i++)
    var cartitem=cartitems[i].elements.length;
    
    var itemrow=top.frames['register'].document.createElement('tr');
    itemrow.setAttribute('id','itemrow');
    itemrow.className='itemrow';
    
    var addcode=top.frames['register'].document.createElement('td');
    addcode.setAttribute('id','code');
    addcode.setAttribute('value','this.cartitem.code.value');
    
    var additem=top.frames['register'].document.createElement('td');
    additem.setAttribute('id','item');
    additem.setAttribute('value','this.cartitem.item.value');
    
    var addcolor=top.frames['register'].document.createElement('td');
    addcolor.setAttribute('id','color');
    addcolor.setAttribute('colspan','1');
    addcolor.setAttribute('value','this.cartitem.color.value');
    
    var addsize=top.frames['register'].document.createElement('td');
    addsize.setAttribute('id','size');
    addsize.setAttribute('value','this.cartitem.size.value');
    
    var addprice=top.frames['register'].document.createElement('td');
    addprice.setAttribute('id','price');
    addprice.className='price';
    addprice.setAttribute('value','this.cartitem.price.value');
    
    var addquantity=top.frames['register'].document.createElement('td');
    addquantity.setAttribute('id','quantity');
    addquantity.className='quantity';
    addquantity.setAttribute('value','this.cartitem.quantity.value');
    
    var addcost=top.frames['register'].document.createElement('td');
    addcost.setAttribute('id','cost');
    addcost.className='cost';
    addcost.setAttribute('value','this.cartitem.quantity.value*this.cartitem.price.value');
    addcost.setAttribute('value','toFixed(2)');
    
    var addtotal=top.frames['register'].document.createElement('td');
    addtotal.setAttribute('id','total');
    addtotal.className='col2';
    addtotal.setAttribute('value','subtotal.value');
    addtotal.setAttribute('value','toFixed(2)');
    
    var addclear=top.frames['register'].document.createElement('td');
    addclear.setAttribute('id','clear');
    addclear.setAttribute('align','center');
    
    var addremoveitem=top.frames['register'].document.createElement('a');
    addremoveitem.setAttribute('id','removeitem');
    addremoveitem.className='removeitem';
    addremoveitem.setAttribute('title','Remove this item');
    addremoveitem.appendChild(document.createTextNode('[x]'));
    
    addclear.appendChild(addremoveitem);
    
    itemrow.appendChild(addcode);
    itemrow.appendChild(additem);
    itemrow.appendChild(addcolor);
    itemrow.appendChild(addsize);
    itemrow.appendChild(addprice);
    itemrow.appendChild(addquantity);
    itemrow.appendChild(addcost);
    itemrow.appendChild(addtotal);
    itemrow.appendChild(addclear);
    cartbody.appendChild(itemrow);
    }
    
    var buttons=document.getElementsByClassName('button');
    for(var i = buttons.length-1; i > -1; i--){addEvent(buttons[i],'click',addtocart,false);}
    Tanks again for all the invaluable assistance

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Are all id's unique? Probably not as they are set in a loop.

    disabled options do not work in all browsers.

    This is setting the text as the value not the value of the control. See previous post
    Code:
    additem.setAttribute('value','this.cartitem.item.value');
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Nov 2009
    Posts
    268

    Re: onclick createelement insertrow

    Since the set Attribute value is only a string should I be using the inner html to refrence the curent forms elements value? I'll try it something like this?

    Code:
    addremoveitem.appendChild(document.createTextNode(this.cartitem.color.value.toFixed(2));
    Thanks Fang for this:

    Code:
    addremoveitem.appendChild(document.createTextNode('[x]'));
    Khor the function call as a cell attribute value would imply a seperate function for each element in the current form/ cartitem written as an attribute of the cell. As you stated my JS is lowsey. It acctually sounds like it might expidite the updating of the table row and would be the way to go provided it always created a refrence to the current forms element value. I can see using this on the clear td as a delete row rather than appending the a element which would only require an adjustment on the css of the td from the existing a tag css. Thanks again for any thoughts. One example for the element value function would be greatly appreciated.

    Aside
    I had most of this site running in a folder in my documents until I read a few articals By Steve Chapman on Unobtrusive javascript and decided that was the way to go. What I thought would be a months work has now become three. It has pointed out how bad my JS is. Inline scripting should be a thing of the past. The learning curb is getting steeper for me.

  7. #7
    Join Date
    Nov 2009
    Posts
    268

    re:onclick createelement insertrow

    Well spoted Fang Now I know why Khor was pulling his hair out. I'm guessing that this isn't the way to get the value of the curent cartitem elements value written to the cell. I took out the single quotes and the td data still shows up blank.

    Code:
    addcost.setAttribute('value',this.cartitem.quantity.value*this.cartitem.price.value);
    I'm starting to question this loop and code snipet

    Code:
    for(var i = 0; i <cartitems.length; i++)
    var cartitem=cartitems[i].elements.length;
    Or maybe Khor is right, the set atrribute value should be written as a function that refrences the cartitem element. An example for the addcost td would be sufficient.

  8. #8
    Join Date
    Nov 2009
    Posts
    268

    re:onclick createelement insertrow

    Fang concerning the option select value. The first value should be read in all browsers. As long as the selected value is the first option value then I should be alright or is it the options length that is returned?

  9. #9
    Join Date
    Nov 2009
    Posts
    268

    re:onclick createelement insertrow

    Fang Finaly got the row inserted but the addevent addtocart placed on all the form buttons only produces the same row cell values which means the loop I posted previously is at error or I need an 'iteration' Maybe it is that all the forms elements have to have different ids like color, color1, color2 etc.?????????
    This is the updated code, thanks for the append text node syntax, I've seen it before but my brain is like a sive.
    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;
    }
    
    function scrollregister(){top.frames['register'].scrollBy(0,22);}
    
    function addEvent(el, eType, fn, uC) {
    if (el.addEventListener) {
    el.addEventListener(eType, fn, uC);
    return true;
    } else if (el.attachEvent) {
    return el.attachEvent('on' + eType, fn);
    }
    } 
    
    function addtocart(cartbody, cells){
    var carttable = top.frames['register'].document.getElementById('carttable');
    var cartbody = top.frames['register'].document.getElementById('cartbody');
    var cartfoot = top.frames['register'].document.getElementById('cartfoot');
    var subtotal = top.frames['register'].document.getElementById('subtotal').innerHTML;
    var cartitems=document.getElementsByClassName('cartitem');
    for(var i = 0; i <cartitems.length; i++)
    var cartitem=cartitems[i].elements.length;
    
    var quantity=this.cartitem.quantity.value;
    var size=this.cartitem.size.value;
    var color=this.cartitem.color.value;
    var code=this.cartitem.code.value;
    var item=this.cartitem.item.value;
    var price=this.cartitem.price.value; 
    
    var itemrow=top.frames['register'].document.createElement('tr');
    itemrow.setAttribute('id','itemrow');
    itemrow.className='itemrow';
    
    var addcode=top.frames['register'].document.createElement('td');
    addcode.setAttribute('id','code');
    addcode.appendChild(document.createTextNode(code));
    
    var additem=top.frames['register'].document.createElement('td');
    additem.setAttribute('id','item');
    additem.appendChild(document.createTextNode(item));
    
    var addcolor=top.frames['register'].document.createElement('td');
    addcolor.setAttribute('id','color');
    addcolor.setAttribute('colspan','1');
    addcolor.appendChild(document.createTextNode(color));
    
    var addsize=top.frames['register'].document.createElement('td');
    addsize.setAttribute('id','size');
    addsize.appendChild(document.createTextNode(size));
    
    var addprice=top.frames['register'].document.createElement('td');
    addprice.setAttribute('id','price');
    addprice.className='price';
    addprice.appendChild(document.createTextNode(price));
    
    var addquantity=top.frames['register'].document.createElement('td');
    addquantity.setAttribute('id','quantity');
    addquantity.className='quantity';
    addquantity.appendChild(document.createTextNode(quantity));
    
    var addcost=top.frames['register'].document.createElement('td');
    addcost.setAttribute('id','cost');
    addcost.className='cost';
    addcost.appendChild(document.createTextNode(quantity*price));
    
    
    var addtotal=top.frames['register'].document.createElement('td');
    addtotal.setAttribute('id','total');
    addtotal.className='col2';
    addtotal.appendChild(document.createTextNode(subtotal));
    
    var addclear=top.frames['register'].document.createElement('td');
    addclear.setAttribute('id','clear');
    addclear.setAttribute('align','center');
    
    var addremoveitem=top.frames['register'].document.createElement('a');
    addremoveitem.setAttribute('id','removeitem');
    addremoveitem.className='removeitem';
    addremoveitem.setAttribute('title','Remove this item');
    addremoveitem.appendChild(document.createTextNode('[x]'));
    
    addclear.appendChild(addremoveitem);
    
    itemrow.appendChild(addcode);
    itemrow.appendChild(additem);
    itemrow.appendChild(addcolor);
    itemrow.appendChild(addsize);
    itemrow.appendChild(addprice);
    itemrow.appendChild(addquantity);
    itemrow.appendChild(addcost);
    itemrow.appendChild(addtotal);
    itemrow.appendChild(addclear);
    cartbody.appendChild(itemrow);
    }
    
    var buttons=document.getElementsByClassName('button');
    for(var i = buttons.length-1; i > -1; i--){addEvent(buttons[i],'click',addtocart,false);}
    Tanks again.

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    As stated previously id MUST be unique.
    Code:
    // in loop
    itemrow.setAttribute('id','itemrow'+i);
    The same applies to all other id's you set. Are the id's necessary?

    I can not see from the JavaScript why you would expect the row values to be different.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  11. #11
    Join Date
    Nov 2009
    Posts
    268

    re:onclick createelement insertrow

    Thanks Fang will check it out latter though I'm not sure that your saying I should do this on the cells as well. I have seen the itteration technique used this way but can't fathom how it could affect each forms button onclick.

  12. #12
    Join Date
    Nov 2009
    Posts
    268
    Fang should I do it on all the cells?

  13. #13
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What are you using the id's for?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  14. #14
    Join Date
    Nov 2009
    Posts
    268
    I'm trying to get each form to write its own row of values.

  15. #15
    Join Date
    Nov 2009
    Posts
    268

    re:Onclick createelement insertrow

    Well Fang and Kor it only took me a week to get it with a few CSS adjustments from element ids to class names the addition of a
    Code:
    var val
    and
    Code:
    var multiply
    I finaly got the row I wanted Inserted.
    The problem is that the
    Code:
    addevent onclick
    has attached the event to all the form buttons but every button returns the same row and values of the first button pressed.
    All of the forms have diferent ids and names like cartitem, cartitem1 etc. Originaly I thought it was irelevant as I refrenced them by class. Unfortunatley all the cartitems have the same element names and ids eg. code, item, color, size, quantity etc. So a for loop is appropriate but
    Code:
    this.cartitem.color.value
    is only supplying one row cell value thru out all the forms
    I realy need an experts advise on this one. The script is getting way to long and is falling short on functionality.
    This is the revised code:
    Code:
    var welcome=top.frames['register'].document.getElementById('welcome');
    
    function hidewelcome(){welcome.style.display='none';}
    
    var trow=top.frames['register'].document.getElementsByTagName('tr');
    
    function rowheight(){trow.length.height='50%';}
    
    var header=top.frames['register'].document.getElementById('header');
    
    function fixheader(){header.style.position='fixed';}
    
    var dumy=top.frames['register'].document.getElementById('dumy');
    
    function showdumy(){dumy.style.display='block';}
    
    function hidedumy(){dumy.style.display='none';}
    
    function start(){hidewelcome();rowheight();fixheader();showdumy();}
    
    var alreadyrun = false;
    window.onload = function() {if (alreadyrun) {return;}alreadyrun = true;start();}
    
    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 scrollregister(){top.frames['register'].scrollBy(0,22);}
    
    function addEvent(el, eType, fn, uC) {
    if (el.addEventListener) {
    el.addEventListener(eType, fn, uC);
    return true;
    } else if (el.attachEvent) {
    return el.attachEvent('on' + eType, fn);
    }
    } 
    
    function removeRow(target) 
    {  do 
    {    if ( target.nodeName.toUpperCase() == 'TR' ) 
    {      target.parentNode.removeChild(target);      
    break;    
    }  } 
    while ( target = target.parentNode );}
    
    function addtocart(cartbody, cells){
    var carttable = top.frames['register'].document.getElementById('carttable');
    var cartbody = top.frames['register'].document.getElementById('cartbody');
    var cartfoot = top.frames['register'].document.getElementById('cartfoot');
    var subtotal = top.frames['register'].document.getElementById('subtotal').innerHTML;
    var cartitems=document.getElementsByClassName('cartitem');
    for(var i = 0; i <cartitems.length; i++)
    var cartitem=cartitems[i].elements.length;
    
    var quantity=this.cartitem.quantity.value;
    var size=this.cartitem.size.value;
    var color=this.cartitem.color.value;
    var code=this.cartitem.code.value;
    var item=this.cartitem.item.value;
    var price=this.cartitem.price.value; 
    var val=[[quantity],[price]];
    var multiply=0;
    multiply+=(val[0]*val[1]);
    
    var itemrow=top.frames['register'].document.createElement('tr');
    itemrow.setAttribute('id','itemrow');
    itemrow.className='itemrow';
    itemrow.setAttribute('id','itemrow'+i);
    
    var addcode=top.frames['register'].document.createElement('td');
    addcode.setAttribute('id','code'+i);
    addcode.className='code';
    addcode.appendChild(document.createTextNode(code));
    
    var additem=top.frames['register'].document.createElement('td');
    additem.setAttribute('id','item');
    additem.className='item';
    additem.appendChild(document.createTextNode(item));
    
    var addcolor=top.frames['register'].document.createElement('td');
    addcolor.setAttribute('id','color'+i);
    addcolor.className='color';
    addcolor.setAttribute('colspan','1');
    addcolor.appendChild(document.createTextNode(color));
    
    var addsize=top.frames['register'].document.createElement('td');
    addsize.setAttribute('id','size'+i);
    addsize.className='size';
    addsize.appendChild(document.createTextNode(size));
    
    var addprice=top.frames['register'].document.createElement('td');
    addprice.setAttribute('id','price'+i);
    addprice.className='price';
    addprice.appendChild(document.createTextNode(price));
    
    var addquantity=top.frames['register'].document.createElement('td');
    addquantity.setAttribute('id','quantity'+i);
    addquantity.className='quantity';
    addquantity.appendChild(document.createTextNode(quantity));
    
    var addcost=top.frames['register'].document.createElement('td');
    addcost.setAttribute('id','cost'+i);
    addcost.className='cost';
    addcost.appendChild(document.createTextNode(multiply.toFixed(2)));
    
    
    var addtotal=top.frames['register'].document.createElement('td');
    addtotal.setAttribute('id','total'+i);
    addtotal.className='col2';
    addtotal.appendChild(document.createTextNode(subtotal));
    
    var addclear=top.frames['register'].document.createElement('td');
    addclear.setAttribute('id','clear'+i);
    addclear.className='clear';
    addclear.setAttribute('align','center');
    
    var addremoveitem=top.frames['register'].document.createElement('a');
    addremoveitem.setAttribute('id','removeitem'+i);
    addremoveitem.className='removeitem';
    addremoveitem.setAttribute('title','Remove this item');
    addremoveitem.appendChild(document.createTextNode('[x]'));
    addremoveitem.onclick=function(){removeRow(this);};
    
    
    addclear.appendChild(addremoveitem);
    
    itemrow.appendChild(addcode);
    itemrow.appendChild(additem);
    itemrow.appendChild(addcolor);
    itemrow.appendChild(addsize);
    itemrow.appendChild(addprice);
    itemrow.appendChild(addquantity);
    itemrow.appendChild(addcost);
    itemrow.appendChild(addtotal);
    itemrow.appendChild(addclear);
    cartbody.appendChild(itemrow);
    }
    
    var buttons=document.getElementsByClassName('button');
    for(var i = buttons.length-1; i > -1; i--){addEvent(buttons[i],'click',addtocart,false);}
    
    
    function stopProp(e) {
    if (e && e.stopPropogation) e.stopPropogation();
    else if (window.event && window.event.cancelBubble)
    window.event.cancelBubble = true;
    }
    
    function stopDef(e) {
    if (e &&e.preventDefault) e.preventDefault();
    else if (window.event && window.event.returnValue)
    window.eventReturnValue = false;
    }
    
    alert(buttons.length);

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles