JavaScript - Major Problem With Shopping Cart!
Similar TutorialsI am working on my shopping cart page with DOM. In my html I created two tables one for items with add buttons, and the other one for displaying how many items are added. So, here is my html codes Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="forms" /> <meta name="keywords" content="Client Side Programming, JavaScript, CSS" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <script type="text/javascript" src="shopping.js"></script> </head> <body> <h1>Central Valley Chocolates</h1> <h2>Gourmet Chocolates</h2> <table border="1" id="chocoateTrable"> <tr id="ch1"> <td>Chocolate Truffles</td><td>$34.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch1').rowIndex)" /></td></tr> <tr id="ch2"> <td>Pecan</td><td>$14.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch2').rowIndex)" /></td></tr> <tr id="ch3"> <td>Truffles</td><td>$28.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch3').rowIndex)" /></td></tr> <tr id="ch4"> <td>caramel</td><td>$22.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch4').rowIndex)" /></td></tr> <tr id="ch5"> <td>Bark</td><td>$17.99</td><td> <input type="button" value="Add" onclick="addItem(document.getElementById('ch5').rowIndex)" /></td></tr> </table> <h2>Your Shopping Cart</h2> <table id="shoppingCart" border="1"> <tr><td>Your shopping cart is empty</td></tr> </table> <p id="total"> </p> </body> </html> And in my js file, I have two functions one for adding items and the other for deleting items. Code: var emptyCart = true; var salesTotal = 0; var curRow = 1; function addItem(selectedItem){ if(emptyCart == true){ document.getElementById('shoppingCart').deleteRow(0); emptyCart = false; } var curItem = document.getElementById("chocolateTable").rows[selectedItem].cells; var selectedItem = curItem[0].innerHTML; var itemPrice = curItem[1].innerHTML; var lastItem = document.getElementById("shoppingCart").rows.length; var cartTable = document.getElementById("shoppingCart"); var newRow = cartTable.insertRow(lastItem); document.getElementById("shoppingCart").rows[lastItem].id = "R" + curRow; var itemCell = newRow.insertCell(0); itemCell.innerHTML = selectedItem; var priceCell = newRow.insertCell(1); priceCell.innerHTML = itemPrice; var actionCell = newRow.insertCell(2); actionCell.innerHTML = "<input type='button' value = 'Remove' " + "onclick=\"removeItem('R"+curROw + "')\" />"; ++curRow; salesTotal += parseFloat(itemPrice.substring(1)); document.getElementById('total').innerHTML = "<strong>Sales total</strong>: $" + salesTotal.toFixed(2); } function removeItem(rowNum){ if(document.getElementById("shoppingCart").rows.length == 1){ document.getElementById("shoppingCart").rows[0].cells[0].innerHTML = "<td>Your shopping cart is empty</td>"; document.getElementById("shoppingCart").rows[0].cells[1].innerHTML = "<td>$0.00</td>"; document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2); emptyCart = true; } else{ var selectedRow = document.getElementById(rowNum).rowIndex; var itemPrice = document.getElementById("shoppingCart").rows[selectedRow].cells[1].innerHTML; document.getElementById("ShoppingCart").deleteRow(seletedRow); salesTotal = salesTotal - parseFloat(itemPrice.substring(1)); document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2); } } However, when I click add button to add each item, I don't see anything in my shoppingCart. Anyone can tell me what is wrong with my code? Hi and hope someone can help, I'm doing some course work on setting / getting cookies for a shopping cart. It basically works except the user can only select one item of each of the goods on offer i.e. you can only buy one cup (not two), one saucer etc. etc. I've deliberately not put a quantity field on the goods selection page and was hoping to modify my set cookie function so that if you've already selected one cup, the next tiume you select a cup, cups become 2 etc. etc. Here's my set cookie function. Notice that I've hard wired a "1" in there which I want to change to the variable for the number of cups. I've also commented out some of the first few lines which were experiments to resolve the problem. Code: function setCookie(name) { alert("Thank you.\n\nYour basket has been updated."); /* if(name.value !=0 || name.value==null) name.value++; x=getCookie(name) || 0; alert(document.cookie);*/ var today = new Date(); var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days document.cookie=name+"= 1 ;expires="+expiry.toGMTString(); cart = document.cookie; } My thanks, R A little while later... I've cracked it, my function now looks like this and it appears to work... Code: function setCookie(name) { alert("Thank you.\n\nYour basket has been updated."); x=parseInt(getCookie(name)) || 0; alert(x); y=x+1; var today = new Date(); var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days document.cookie=name+"="+y+";expires="+expiry.toGMTString(); cart = document.cookie; } Thanks you fror your interest, appreciated, R I'm using simpleCart.js (http://simplecartjs.com ) on http://yogasports.biz and have run into issues. I would like the checkout page to allow items to be removed or quantities edited and it is currently not allowing it. The javascript is located at http://yogasports.biz/simpleCart.js Also there are additional shipping options that are not appearing upon checkout yet they are declared in the paypal account. I'm unsure of what to edit in the javascript file so that they will appear. Hi all, I have just joined this forum hoping for some help on a problem i am having, i have a feeling the solution is simple but im a noob at JAVA so i have no idea how to work it out. The site is.... http://inspirecalendar.net/html/purchase.html The problem is the following.... When you select US (West Coast) as your location it doesn't update the price on the right properly. If you select it first it just won't display anything. if you select it after choosing another one and hitting continue then it doesn't change. Any help would be appreciated, hope i explain the problem properly if you have any questions feel free to ask... Thnks in advance :Smiley Hello guys my question has changed, i dont want to double post so here is my new question, I now have 3 arrays name price quantity totalPrices now i want to create a table that will hold them but it will be created when you click the shop cart button, this button will take you to a blank page with the table on it i would like something like this Toy name| Quantity | Price | Total price Toy1 | Quantity | Price | Total price of that toy Toy2 | Quantity | Price | Total price of that toy Toy3 | Quantity | Price | Total price of that toy ----- | -------- | ----- | Total price all together I have looked at many tutorials but i cant get any to work, all they do is draw nothing and i cant get it to work Hi Guys, I am trying to get the Fat-Free shopping cart woking with a flash file. I have tried [CODE] on (rollOver) { _parent.gotoAndPlay("s1"); } on (releaseOutside, rollOut) { _parent.gotoAndPlay("s2"); } on (release) {getURL("https://www.e-junkie.com/ecom/fgb.php?c=cart&cl=1&ejc=2&merchant_id=your_google_merchant_id&business=website.com" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this));"}[CODE] The compiler tells me that a ')' or ',' is expected. Any help appreciated. I am a newbie. Thanks PeterW hello recently i finally managed to make a working shopping cart system, in that i can add as many items as i want and it will work, all using cookies. Then i have another page, the cart which reads the cookie entry made with each demo purchase, then using a while loop lists these items, the problem i am having, is that when i add the textbox which would hold the value of the quantity, it is put out on the next line down, instead of next to the text which i find quite annoying. Also i would like to know how i can add a button next to the textbox, for updating the quantity, also ide like to know how i could access that button, or have it do something, since it wouldnt be prewritten. any help would be greatly apreciated. here is a zip file containing the html files of the customizable purchase page, and the new shopping cart. be sure to refresh the page before trying to use the first page, so it establishes the counter cookie. Hi All! Thanks in advance to any and all who help me. What we are trying to do is have a form where customers can use a conditional logic based form that upon submission will redirect to checkout with an appropriate product bundle being populated in the shopping cart. I have some experience with creating forms, in fact I have made a decent form that I have modified from an online form builder... the problem is I have no idea how to auto-fill the shopping cart... period. From what I have read in my research this should be a function of Javascript. I have a decent working knowledge of php, and html, but I am pretty clueless when it comes to Javascript, if anyone could point me in the right direction for this project I would really appreciate it. Hello All, So, I have a website with a floating cart and it loads fine and works almost flawlessly lol. However, when a person has a bunch of items in their cart, and they want to minimize it for the rest of their browsing experience, every time a new page loads, or a refresh happens, the floating cart un-minimizes and expands out fully again displaying all the items. This can become very annoying during the shopping experience when you have a bunch of items loading and just taking up space in the browser. Therefore, I am wondering if their is some html or script that would save the minimizing in the floating cart, and carry it over to the next page, and the rest of the browsing on site? Thank you for any suggestions/help. I am new to HTML and script writing, but I am eager to learn. Hopefully in the future, I won't be paying for little changes like this every time I need one. Hi there i would be most most grateful if someone could edit this code so that it accepts the inputs from the marks fields to calculate the mean and standard deviation. thanks in advance, chris ********************************************************* <html> <head> <title>Student Result Processor</title> <style type="text/css"> body { background-image:url('Background.jpg') } .container { text-align:center; margin: 10px auto; } .content { width: 400px; } </style> <script language="javascript"> function addRow() { var newRow = document.all("tblGrid").insertRow(); var oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t1' size='10'>"; oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t2' size='20'>"; oCell = newRow.insertCell(); oCell.innerHTML = "<input type='text' name='t3' size='5'>"; oCell = newRow.insertCell(); oCell.innerHTML = "<input type='button' value='Delete' onclick='removeRow(this);'/>"; } function removeRow(src) { var oRow = src.parentElement.parentElement; document.all("tblGrid").deleteRow(oRow.rowIndex); } </script> </head> <body> <div class="container"> <div class="content"> <hr> <table id="tblGrid"> <tr> <td class="container">SID</td> <td class="container">NAME</td> <td class="container">MARK</td> <td></td> </tr> </table> <hr> <input type="button" value="Add Row" onClick="addRow();" /><br /> <input type="button" Value="Calculate" onClick="calc();" /> <hr> </div> </div> </body> <script type = "text/javascript"> function calc() { var data = [2,3,4,6,7]; var deviation = []; var sum = 0; var devnsum = 0; var stddevn = 0; var len = data.length; for (var i=0; i<len; i++) { sum = sum + (data[i] * 1) // ensure number } var mean = (sum/len).toFixed(6); // 6 decimal places for (i=0; i<len; i++) { deviation[i] = data[i] - mean; deviation[i] = deviation[i] * deviation[i]; devnsum = devnsum + deviation[i]; } stddevn = Math.sqrt(devnsum/(len-1)).toFixed(6); // 6 decimal places alert ("The mean is: " + mean + " The standard deviation is: " + stddevn); } </script> </html> ********************************************************* My professor asked us to make a webpage that has a user register and login in via a xml document. We can omly use html, javascrip and css. I made a function that loads users from an xml file and authenticates them. It works only on firefox and not IE. This is a problem because i am using ActiveXobject to write to the file. Any help will greatly be appreciated. Here is my function that loads xml: Code: function ReadXML() { try { xmlDoc = loadMyXML("xmlStudent.xml"); } catch (objerr) { alert(objerr.description); } xmlfile = xmlDoc.getElementsByTagName('student'); fname= xmlDoc.getElementsByTagName("firstname"); lname= xmlDoc.getElementsByTagName("lastname"); usernames = xmlDoc.getElementsByTagName("username"); passwords = xmlDoc.getElementsByTagName("password"); } Here is the xmlfile Code: <?xml version="1.0" encoding="utf-8"?> <!--My first xml file (^-^) --> <CST2309> <student> <firstname>bob</firstname> <lastname>harris</lastname> <username>admin111</username> <password>11111111</password> </student> <student> <firstname>joe</firstname> <lastname>smith</lastname> <username>joe222</username> <password>22222222</password> </student> <student> <firstname>sarah</firstname> <lastname>diaz</lastname> <username>sarah333</username> <password>33333333</password> </student> <student> <firstname>katie</firstname> <lastname>adams</lastname> <username>katie444</username> <password>44444444</password> </student> </CST2309> i am building a graphing calculator, it works but it is slow. graph.graph(equ) is the main function it graphs. i think that this is the problomatic area. Code: var initgraph = function( canvasid ) { var graph = { } ; graph.logmsg = []; var dlog; graph.curlog = ( document.getElementById( "dlog" ) ) ? document.getElementById( "dlog" ) : null; if ( graph.curlog === null ){ graph.dlog = function() { } ; } else{ graph.dlog = dlog = function( str ) { graph.logmsg.push( str ); var temp = graph.logmsg.join( "\n" ); graph.curlog.value = temp; return str; } ; } //alert( 'debbuging log initalized' ); graph.canvas = document.getElementById( canvasid ); graph.dlog( "canvas found" ); graph.dlog( "width: " + ( graph.w = parseInt( document.defaultView.getComputedStyle( graph.canvas, null ).width, 10 ) ) ); graph.dlog( "height: " + ( graph.h = parseInt( document.defaultView.getComputedStyle( graph.canvas, null ).height, 10 ) ) ); graph.h2 = Math.round( graph.h / 2 ); graph.w2 = Math.round( graph.w / 2 ); graph.dlog( "computed styles calculated" ); graph.ctx = graph.canvas.getContext( "2d" ); graph.dlog( 'canvas context gained' ); graph.ctx.fillStyle = "#E0FFFF"; graph.dlog( 'styles set' ); graph.ctx.translate( graph.w2, graph.h2 ); graph.ctx.stroke(); graph.ctx.save(); graph.dlog( 'canvas context saved' ); graph.ctx.beginPath(); graph.dlog( 'axis postitions have been calculated' ); graph.lg = []; graph.gs = []; graph.dlog( 'arrays initialized' ); graph.goodsize = 1; if( graph.h < 200 || graph.w < 200 ){ alert( "Canvas for graph is too small.\n Minimum recomended size is 200 X 200, recomended size is 500 X 500.\nSize is " + graph.h + " X " + graph.w + ".\n Graphs may be hard to see or they may be pointless." ); graph.goodsize = 0; } else{ graph.dlog( "graph is big enuf" ); } if( graph.h != graph.w ){ alert( "The canvas is not square. Graph may not look right." ); graph.goodsize = 0; } else{ graph.dlog( 'graph is square' ); } graph.lineTo = function( x, y ){ graph.ctx.lineTo( x, - y ); return graph; } ; graph.moveTo = function( x, y ){ graph.ctx.moveTo( x, - y ); return graph; } ; graph.dot = function( xx, yy ) { if( ( typeof xx !== "number" || typeof yy !== "number" ) || Math.abs( xx ) > graph.w2 || Math.abs( yy ) > graph.h2 ) { graph.dlog( "Dot (" + xx + ", " + yy + ") will not fit on the graph. Will not attempt to graph." ); return graph; } graph.ctx.fillStyle='#2B167B'; yy = 0 - Math.round( yy ); xx = Math.round( xx ); graph.ctx.fillRect( xx - 1, yy + 1, 3, 3 ); return graph; } ; graph.dlog( 'basic graphing methods created' ); graph.da = function( axes,ticks,orgin )///////////////////////////////////////////////////////////////////////////////////////// { // if ( clr === true ) // { // graph.ctx.clearRect( - graph.w2, - graph.h2, graph.h, graph.w ); // } // old stuf. graph.ctx.strokeStyle = "#2B167B"; if( axes ){ graph.moveTo( - graph.w2, 0 ); graph.lineTo( graph.w2, 0 ); graph.moveTo( 0, - graph.h2 ); graph.lineTo( 0, graph.h2 ); //alert('axes') } if( ticks ){ var j = - 3; var i = - graph.w2; for( i; i <= graph.w2; i += 10 ) { graph.ctx.moveTo( i, j+0.5 ); graph.ctx.lineTo( i, j +5.5 ); } j = - 3; i = - graph.h2; for( i; i <= graph.h2; i += 10 ) { graph.ctx.moveTo( j+0.5, i ); graph.ctx.lineTo( j + 5.5, i ); } // alert('ticks') } if( orgin ){ graph.dot( 0, 0) // alert('orgin') } graph.ctx.stroke(); graph.ctx.beginPath(); return graph; } ; graph.dlog( 'axis drawing method initialized' ); graph.clrAll = function(){ graph.gs = []; graph.ctx.fillStyle="#eoffff" graph.ctx.fillRect( -graph.w2, -graph.h2, graph.w, graph.h ); graph.ctx.beginPath(); graph.dlog('graph cleared'); return graph; } graph.clrAll(); graph.dlog( 'axes drawn' ); graph.ec = function( /*y=*/equ ){ if( typeof equ !== "string" ) { alert( "Equation must be a string." ); return false; } equ = equ.replace( /\|([^\|]+)\|/g, "Math.abs($1)" ); equ = equ.replace( /([a-z0-9\.\-]+)\s*\^\s*([a-z0-9\.\-]+)/, "Math.pow($1,$2)" ); // eventually this will allow for normal human syntax equations and not only javascript syntax ones return equ; } ; graph.dlog( 'equation interpreter initialized' ); graph.graph = function( /*y=*/equ ){ equ = graph.ec( equ ); graph.ctx.strokeStyle='#800000'; if( equ === false ) { alert( 'Pass equation as a string without the "y=", "f(x)=", "g(x)=" or similar.' ); return graph; } var a=graph.lg; graph.gs[graph.gs.length] = equ; var i = 0; for( var x = 0 - graph.w2; x <= graph.w2; x ++ ) { try { var a=graph.lg; graph.lg[x] = eval(equ); } catch( e ) { alert(graph.dlog("Bad syntax!")); return graph } if( isNaN( graph.lg[x] ) || Math.abs( graph.lg[x] ) > graph.h2 ) { if(isNaN(graph.lg[x])){ i=0} } else{ if( i === 0 ){ graph.moveTo( x, graph.lg[x] ) i = 1; } else{ graph.lineTo( x, graph.lg[x]) graph.ctx.stroke(); } } } dlog('graphed '+equ); return graph; } ; graph.dlog( 'main graphing object initialized. \ngraph library finished. exiting grafit.js' ); return graph; } // --------------------------------------- ; it is used in this way Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <link rel='stylesheet' href="jsgraphcalcstyle.css" type="text/css" /> <title>Javascript graphing calculator</title> <script type="text/javascript" src="untitled1.js"> </script> </head> <body> <script type="text/javascript" src='clik.js'> </script> <form id="form" action='javascript:graf()' onsubmit="graf()" name="form"> <h1>Javascript Graphing Calculator</h1> <div id="fakepad" class='back'> <div id='back'> <table summary="main structure"> <tr> <td colspan="4"><canvas id="screen" class='back' title='Graph' width="500" height="500"></canvas></td> </tr> <tr> <td colspan="2"> <span class="mem">f</span>(x) = <input type="text" class='back' id="equat" accesskey="f" /> </td> <td><button type="button" id="enter" value="Graph" onclick="graf()" accesskey="g"> <span class="mem">G</span>raph</button> </td> <td> <!-- <input type="button" id="clear" value="Clear" onclick="graph.clrAll();">--> <button type="button" id='clear' value='clear' onclick="clr();" accesskey="c"> <span class="mem">C</span>lear</button> </td> </tr> <tr> <td rowspan="2"> <input type="checkbox" id="showaxes" value="yes" checked='checked' onclick="clik()" accesskey="a" /> <label for="showaxes">Show <span class='mem'>a</span>xes</label> <!-- results in Show axes with the a underlined--> <br /> <input type='checkbox' id='showticks' value='yes' checked='checked' onclick='clik()' accesskey="t" /> <label for="showticks">Show <span class='mem'>t</span>ick marks</label> <!-- results in Show tick marks with the t underlined--> <br /> <input type="checkbox" id="showorgin" value="yes" disabled="disabled" onclick='da()' accesskey="o" /> <label for='showorgin' id='orginlab' class='dis'>Show <span class="mem">o</span>rgin</label> <!-- results in Show orgin with the o underlined--> <br /> </td> <td><!--spacer--></td><!--spacer--> <td><!--spacer--></td><!--spacer--> </tr> </table> </div> </div><!--inline div, requier <br>--> <br /> finish the function above and press Graph to graph it.<br /> Each tick mark on the graph is 10 units. <div id='debug' class="c2"> <textarea id='dlog' class="back" cols='70' rows="7" readonly="readonly"> </textarea><br /> <p class="c1">debugging log</p> </div><span><br /> <input type='button' id='dbut' onclick="dis()" value="Show debugging log" /></span> </form><script type="text/javascript" src='init.js'> </script> </body> </html> Our site has quite a few 'features' to it. One is a drop down menu at the top of the site, another is an AJAX add to cart thing that loads the product to the cart without refreshing the page. Here's the problem. If someone adds a product to the cart and goes to view the cart, the space where the cart information usually is will be empty. The sidebar, top navigation, footer, all that, is still there. The cart info itself is gone. What we have noticed is if you add say 2 different products to the cart, view the cart (empty page at this point), and then use the drop down cart summary in the header to remove a product from the cart summary, the cart info will all of a sudden appear as it should. Refresh the page and it goes away again. It seems like removing the product from the cart summary in the header forces the AJAX add to cart feature to re-load the cart bringing it back. It just isn't loading initially. We have no idea why it quit working. It has been working for nearly two months with no problem. Here is a link to the site, you can test it yourself. soundisolationstore dot com The checkout works fine, just not the cart page. Please help if you can! I have a function which allows the number of buttons selected depending on the number selected from the drop down menu. Problem is that this code works in all of the major browsers except for Internet Explorer (No Suprise). For example if user chose the number 3 from the dropdown menu, then user can only select 3 buttons. Why is it not working in Internet explorer and what can be used to make it work in Internet Explorer? Below is javascript functions: Code: function getButtons() { document.getElementById("answerA").class="answerBtnsOff"; document.getElementById("answerA").setAttribute("class","answerBtnsOff"); document.getElementById("answerA").setAttribute("className","answerBtnsOff"); document.getElementById("answerB").class="answerBtnsOff"; document.getElementById("answerB").setAttribute("class","answerBtnsOff"); document.getElementById("answerB").setAttribute("className","answerBtnsOff"); document.getElementById("answerC").class="answerBtnsOff"; document.getElementById("answerC").setAttribute("class","answerBtnsOff"); document.getElementById("answerC").setAttribute("className","answerBtnsOff"); document.getElementById("answerD").class="answerBtnsOff"; document.getElementById("answerD").setAttribute("class","answerBtnsOff"); document.getElementById("answerD").setAttribute("className","answerBtnsOff"); document.getElementById("answerE").class="answerBtnsOff"; document.getElementById("answerE").setAttribute("class","answerBtnsOff"); document.getElementById("answerE").setAttribute("className","answerBtnsOff"); currenttotal=0; } function btnclick(btn) { if(document.getElementById("numberDropId").value=="") { alert('You must first select the number of answers you require from the drop down menu'); return false; } if (btn.class=="answerBtnsOn") { btn.class="answerBtnsOff"; btn.setAttribute("class","answerBtnsOff"); btn.setAttribute("className","answerBtnsOff"); currenttotal--; return false; } if(document.getElementById("numberDropId").value==currenttotal) { alert('You are not allowed beyond the limit of the number of answers you require, deselect other button'); return false; } if (btn.class=="answerBtnsOff") { btn.class="answerBtnsOn"; btn.setAttribute("class","answerBtnsOn"); btn.setAttribute("className","answerBtnsOn"); currenttotal++; return false; } } If you html code then this is below: Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" > <table id="middleDetails" border="1"> <tr> <td>Question:</td> <td rowspan="3"> <textarea rows="5" cols="40" name="questionText"></textarea> </td> <td>Option Type:</td> <td> <select name="optionDrop" onClick="getDropDown()"> <option value="">Please Select</option> <option value="abc">ABC</option> <option value="abcd">ABCD</option> <option value="abcde">ABCDE</option> <option value="trueorfalse">True or False</option> <option value="yesorno">Yes or No</option> </select> </td> <tr> <td colspan="2"></td> <td>Number of Answers:</td> <td> <span id="na">N/A</span> <select name="numberDrop" id="numberDropId" onChange="getButtons()"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> </form> I've been given this ridiculous assignment where I have to create a shopping web page. I really need help finding the javascript codes that will allow the user to update their total as they enter the quantities of the different products in the assigned text boxes. I don't even know where to start because we were never taught how to do this in class! I am looking for help to develop a java code for my e-commerce site mini cart. I have looked locally (kijiji) and on Coding Forums market place and haven't received a great response. Either the person had other projects they were working on or they were trying to "sell" me more than what I was asking for (ie web and graphic design). I have a mini cart on my site that I would like to have a few specific features. I am hoping someone in this forum can help me out (as I have received wonderful help before!!) I need a javascript code/feature that will: - highlight the most recent item that has been added to slide down mini cart window - refresh the mini cart div content to update item count and price. On the site I am hosted on there is a built in feature to show how many items are in the cart and total price, but I don't know how to get it to update successfully - when slide down mini cart window refreshes it should'nt scroll to the top (if there is a scrollbar) ie: looking to implement a javascript: void (0) if possible - have the slide down minicart window appear for 5-10 seconds then automatically slide back up. (the visitor can also have the option to close the window before the 5 seconds) I would really appreciate any help with this. I find javascript hard and I have tried to learn it, but unfortunately I can't seem to grasp it . Right now this javascript shopping cart works to 1. charge shipping based on the item, 2. the destination country, 3. it combines shipping for a quantity over 1 of the SAME item. Each item has 2 different possible shipping charges. I am trying to get the javascript to check the shopping cart to see what item in the cart has the highest possible shipping charge, charge that amount to that item, and charge the lowest possible shipping charge on all other items in the cart. If item A is purchased alone shipping is $5.00. If purchased with item B, which costs $10.00 to ship alone, the $10.00 is charged for item B and only $3.00 for item A. Because item B had the higher shipping charge at a quantity of one. I have tried adding various things like me.items[current], item.shipping, me.shipping, this.shipping, shipping_Cost, and other things next to the second && in the part of the script that shows the country. I have also tried adding && if (me.whatever) and && if (item.whatever) and similar things at the beginning of the script next to if (this.country). I have found the parts of the script that pertain to cart items and to updating the shopping cart. Now I am stuck. The javascript is in 2 parts. One part goes in the item page, which I will post first. The second part goes in an external javascript file which I will post at the bottom. In between there is the part that shows the shopping cart. It isn't part of the javascript. Code: <script type="text/javascript" src="simpleCart.js"></script> <script type="text/javascript"> <!-- simpleCart.checkoutTo = PayPal; simpleCart.email = "my Paypal email address"; simpleCart.cartHeaders = ["Name" , "Price" , "Quantity" , "remove" ]; CartItem.prototype.shipping=function(){ // we are using a 'country' field to calculate the shipping, // so we first make sure the item has a country if(this.country){ if( this.country == 'United States' && this.quantity == '1'){ return this.quantity*5.00; } else if( this.country == 'United States' && this.quantity >= '2') { return this.quantity*3.00; } else if( this.country == 'Belgium' && this.quantity == '1') { return this.quantity*12.00; } else if( this.country == 'Belgium' && this.quantity >= '2') { return this.quantity*9.00; else { return this.quantity*0.00; } } else { // use a default of $0.00 per item if there is no 'country' field return this.quantity*0.00; } } // --></script> Code: <div style="display:block;"></div> <div>SHOPPING CART</div> <div class="cartHeaders"></div><br><br><br> <div class="simpleCart_items"></div> <div id="totals"> Item Total: <span class="simpleCart_total"></span><br>Shipping Total: <span class="simpleCart_shippingCost"></span><br>Tax: <span class="simpleCart_taxCost"></span><br>Final Total: <span class="simpleCart_finalTotal"></span> </div> <br><br><br><br> <br><br> <a href="javascript:;" class="simpleCart_empty">Empty Shopping Cart</a><br><br> <a href="javascript:;" class="simpleCart_checkout">Checkout Through Paypal</a> </div></div> separate javascript file is here http://simplecartjs.com/documentation.html |